Information restructuring, editing, and storage systems for web browsers

ABSTRACT

The present disclosure relates to methods, computer readable mediums (CRMs), and systems for creating, organizing, viewing, and connecting annotations of web documents within web browsers that are made to be annotation capable. Methods, CRMs, and systems for an annotation capable web browser transmitting annotation highlighted text, annotation comment, uniform resource locator (URL), document object model (DOM) context, screenshot with marked annotation highlighted text, and annotation symbol to an annotation server are presented. Furthermore, methods, CRMs, and systems of organizing annotations within an annotation organization context area, visual queues for viewing and recognizing annotations in web documents, and a notepad for connecting annotations between web documents are presented. This disclosure relates to note taking within web documents, organizing these notes, discussing specific aspects of a web document with multiple people, and creating guided tours across multiple web documents as a reminder for oneself or for others.

CROSS-REFERENCE TO RELATED APPLICATIONS

Not Applicable

STATEMENT REGARDING FEDERALLY SPONSORED RESEARCH OR DEVELOPMENT

Not Applicable

REFERENCE TO SEQUENCE LISTING, A TABLE, OR A COMPUTER PROGRAM LISTINGCOMPACT DISC APPENDIX

Not Applicable

BACKGROUND OF THE INVENTION

The world wide web (WWW), web browsers, and browser extensions are wellknown. The WWW is a global information source where assets such as webpages, pdf documents, images, and videos are identified by uniqueuniform resource locators (URLs), and web browsers are softwareapplications designed to access information on the WWW. In addition,browser extensions are pieces of software designed to extend thecapabilities of pre-existing web browsers. It is also known that webbrowser functionality can be modified either by modifying a webbrowser's software code base or by providing a web browser extension forthose web browsers that support the addition of functionality by suchmeans.

As the world wide web has grown in popularity, people, on average, arespending more time each day using the world wide web than they have inthe past. As the average time spent using the world wide web hasincreased, people have a greater need to do the following tasks.Retrieve information that they have previously seen on the WWW. Send anddiscuss snippets of text within web documents with friends andcolleagues. Refer to specific pieces of text or context within a webdocument. Ask specific questions about portions of web documents.Connect information across web documents. Find and organize content andsnippets for later use. Evaluate the value of crowd-sourced information.And, access other people's public comments on web documents and putthese comments in context. To deal with these use cases, peopletypically do the following. They repeat searches to find content thatthey previously accessed. They bookmark web documents. They rescanarticles for snippets they recall seeing. They copy and paste sectionsof text into email messages or other documents to share with friends orcolleagues. They refer to sentences or paragraphs by number or web pagelocation while discussing on the phone. They ask questions in thecomments section of an article and reference the desired text by cuttingand pasting it into the comment. They download the web page. And, theycopy snippets into a personal word processor or spreadsheet document.These improvised solutions are inefficient and waste the time of a largenumber of users. Furthermore, the lack of tools for identifyinginaccuracies and spreading this knowledge to other users has allowedinaccurate information to persist longer than it should. Providingmethods, computer readable mediums, and systems for handling these tasksmore efficiently would be advantageous.

BRIEF SUMMARY OF THE INVENTION

An object of the invention is to provide users an annotation enabled webbrowser to annotate web pages and documents in such a way that users atanother location on the Internet also using such an annotation enabledweb browser can identify questions, interesting points, statements thatagree, and statements that disagree without reading the text of the userannotation comment or the annotation highlighted text. Such a mechanismimproves the efficiency with which a user sorts through vast quantitiesof information on the WWW.

A further object of the invention is to provide users an annotationenabled web browser to annotate pictures, videos, and sound recordingsthat are uploaded or embedded in web pages in such a way that users atanother location on the Internet also using such an annotation enabledweb browser can view these picture, video, and sound recordingannotations.

Another object of the invention is to ensure that the document viewingcontext is modified in a minimal way after annotations are added incomparison to the document viewing context without the annotations.Using a document viewing context that is minimally modified allows usersto consume content without being distracted by the annotations whilesimultaneously being able to find and make use of the annotations atappropriate times.

A further object of the invention is to present advertisements to usersnonintrusively. One goal is to show advertisement contents to usersafter these users initiate an action triggered by curiosity, wherein thecuriosity is triggered by the presentation of the advertisement in acertain location or context within a web page. This location or contextsuggests the advertisement might be relevant to the users' currentneeds. Furthermore, the presented ad without its contents may containsome aspects of the full advertisement, but the full details are notdisplayed until the user initiates an action triggered by curiosity thatis instilled by contextual methods that selectively and transparentlytarget the user based on the user's current needs.

Another object of the invention is to provide a separate annotationviewing context area that is separate from the world wide web documentviewing context area. This annotation viewing context area has amechanism in addition to search and filtering that presents annotationsto users in such a way that users can understand the site of origin forfamiliar sites and the approximate location of the annotation.Furthermore, other elements of the context of the annotation orhighlighted text may become clear without having to read the highlightedtext or user annotation comment. This mechanism makes finding a specificannotation from amongst a large number of other annotations an easiertask.

A further object of the invention is to provide an annotationorganization context area that allows users to scan and organize theannotations into meaningful groupings. An advantage of this object isthat it allows users to focus on creating annotations first and focus onorganizing them after the annotations have been created. Furthermore,default organizations of the annotations do not need to be undone.

Another object of the invention is to provide users an annotationviewing context area that allows the user to view pages of annotations,keep some annotations available for later review, and continue to searchfor other annotations. Furthermore, the method facilitates mentaltracking by keeping the annotations in visual view while moving theannotations not of interest out of visual view.

An additional object of the invention is to transparently convey privacysettings to users at all times. Conveying privacy settings will avoidthe accidental sharing of information a user does not want to share.

A further object of the invention is a way to create guided toursthrough a series of websites on the global Internet while drawing theusers' attention to the salient points of interest on each site. Thisobject further includes ways to modify the tour and present the tour tousers.

Another object of the invention is to provide a way for groups to manageaccess control permissions and to communicate through messaging.

BRIEF DESCRIPTION OF THE SEVERAL VIEWS OF THE DRAWINGS

For a more complete understanding of the invention, reference is made tothe following description and accompanying drawings, in which:

FIG. 1 shows a flow chart of annotations being created, moved to twodifferent collections, and shared with others via the collections;

FIG. 2 shows a flow chart of annotations being viewed on two separateweb pages on two separate days;

FIG. 3 represents an annotation capable web browser, in an exemplaryembodiment wherein a web browser not capable of creating annotations hasbeen augmented with a web browser extension providing annotationcapability, before the annotation process has begun;

FIG. 4 shows an annotation capable web browser after text has beenhighlighted;

FIG. 5 shows an annotation capable web browser before an annotationsymbol has been selected;

FIG. 6 shows an annotation capable web browser after an annotationsymbol has been selected;

FIG. 7 shows an annotation capable web browser after an annotation hasbeen created and the displayed annotation symbol is in the open state;

FIG. 8 shows an annotation capable web browser after an annotation hasbeen created and the displayed annotation symbol is in the closed state;

FIG. 9 shows an annotation item box providing context for an annotationwhen presented in a separate context area and not presented as anoverlay on an existing web document adjacent to the highlightedannotation text;

FIG. 10 shows an annotation organization context area presentingannotation item boxes and displayed writeable collections within aseparate context area that is separate from the original web documentscontaining the annotation highlighted texts;

FIG. 11 shows an annotation organization context area showing theprocess of moving and duplicating annotations into collections, whichare groupings of annotations and other items;

FIG. 12 shows an annotation capable web browser showing a web documentwith displayed annotation symbols in the closed state;

FIG. 13 shows an annotation capable web browser showing a web documentwith displayed annotation symbols in the closed state with theircorresponding displayed annotation symbol beacons;

FIG. 14 presents a sequence diagram showing the communication between anannotation capable web server, the web server that provides the data ofthe visited URL, the annotation server, the electronic database, and theCDN;

FIG. 15 presents a sequence diagram showing the communication betweenthe web browser, the annotation server, the electronic database, and theCDN for the purpose of organizing annotations;

FIG. 16 presents a sequence diagram showing the communication betweenthe annotation capable web browser, the web server that provides thedata of the visited URL, the annotation server, and the electronicdatabase;

FIG. 17 presents a flow chart showing the receipt and storage of abundle of data elements;

FIG. 18 presents a flow chart showing the compilation and transmissionof a bundles display set;

FIG. 19 presents a flow chart showing how the user, web browser, webbrowser extension content script, and web browser extension backgroundscript interact, allowing a user to view a web page and create anannotation on the page;

FIG. 20 presents a flow chart showing how the user, web browser, webbrowser extension background script, and web browser extension contentscript interact, allowing a user to view a web page with annotations onthe page;

FIG. 21 presents a flow chart showing how the nurse using this exemplaryembodiment creates a notepad about glycemic index to share with apatient;

FIG. 22 presents a flow chart showing how the patient uses the notepadprovided by the nurse;

FIG. 23 presents the user interface of the notepad within the extension;

FIG. 24 presents a sequence diagram of a notepad being created and oneannotation being created and added to the notepad;

FIG. 25 presents a sequence diagram of a notepad being viewed, the firstannotation being clicked, and a browser navigating to that URL anddisplaying the annotation after scrolling to the appropriate location;

FIG. 26 presents a flowchart showing a notepad being created and analready created annotation being added to the notepad;

FIG. 27 presents a flowchart showing a notepad being viewed and theannotation in the notepad being opened;

FIG. 28 presents an exemplary embodiment of a system diagram;

FIG. 29 presents another exemplary embodiment of a component diagram forthe annotation server and electronic database;

FIG. 30 presents an exemplary embodiment showing client electronicdevices for the annotation server;

FIG. 31 presents an exemplary embodiment of a collection items page forthe US History collection;

FIG. 32 presents an exemplary embodiment of the collections page;

FIG. 33 presents an exemplary embodiment of the inbox page showing asystem message;

FIG. 34 presents an exemplary embodiment of the inbox page after userresponds to the system message and other users also send messages;

FIG. 35 shows the picture annotation viewing and picture annotationgroup creation interface;

FIG. 36 shows the picture annotation group creation interface with oneannotation group list item added to the candidate annotation group list;

FIG. 37 shows the picture annotation group creation interface with oneannotation group list item with a second non-colliding pictureannotation not added to the candidate annotation group list;

FIG. 38 shows the picture annotation group creation interface with twoannotation group list items added to the candidate annotation grouplist;

FIG. 39 shows the picture annotation group creation interface with oneannotation group list item added to the candidate annotation group listwith a second colliding picture annotation not added to the candidateannotation group list;

FIG. 40 shows the video annotation viewing and video annotation groupcreation interface;

FIG. 41 shows the video annotation viewing and video annotation groupcreation interface with one video annotation added to the candidateannotation group list box with motion paths for video annotationelements;

FIG. 42 shows the video annotation group creation interface with twoannotation group list items added to the candidate annotation group listwith motion paths for the second video annotation elements;

FIG. 43 shows the video annotation group creation interface with oneannotation group list item added to the candidate annotation group listwith a second colliding video annotation not added to the candidateannotation group list;

FIG. 44 shows the sound annotation viewing and sound annotation groupcreation interface with timeline sound annotations and a derived soundannotation creation interface;

FIG. 45 shows the video annotation viewing and video annotation groupcreation interface with timeline video annotations and a derived videoannotation creation interface;

FIG. 46 shows an annotation capable web browser showing a video withembedded video annotation beacons;

FIG. 47 shows an annotation capable web browser after a pictureannotation has been created and the embedded displayed pictureannotation is in the open state;

FIG. 48 shows an annotation capable web browser after a video annotationhas been created and the embedded displayed video annotation is in theopen state during the video annotation playback range; and

FIG. 49 shows an annotation capable web browser after a sound annotationhas been created and the embedded displayed sound annotation is in theopen state during the sound annotation playback range.

DETAILED DESCRIPTION OF THE INVENTION

Methods, non-transitory computer readable mediums (CRMs), and systemsare provided for annotating web pages, documents, pictures, videos, andsound recordings within web browsers; organizing these annotations;viewing these annotations; and connecting these annotations into usefuldigital notepads that include a set of annotations. A web document has aURL and includes web pages, pdf documents, and other document typesdisplayed in web browsers. Furthermore, these methods, non-transitoryCRMs, and systems provide facilities for curating content, sharingcontent with other users, and managing access controls. The descriptionscontain flow charts showing a user's rationale for using the systems andnon-transitory CRMs herein. In addition, graphical user interface (GUI)diagrams show the end result of computer readable medium instructionsand what systems display. Furthermore, sequence diagrams show theinteraction and data flow between various components, and flowchartsdescribe methods. In addition, swimlanes show the actions of variouscomponents.

An annotation is an explanatory note, comment, or drawing added to atext, diagram, picture, document, video, or sound recording. Whendescribing methods, non-transitory CRMs, and systems; terminology isintroduced to describe annotations within different contexts along withthe data elements and structures to represent annotations and objectsthat add to the context of annotations within web pages, web documents,documents, pictures, videos, and sound recordings as well as withinseparate context areas.

In FIG. 1, a flowchart of a teacher using an exemplary embodiment of anannotation capable web browser is shown. The teacher has two separategoals. The first goal is to create a list of study questions aboutpresidents for students in the teacher's class. The teacher's class issmall, and students can see each other's responses in this examplewithin the exemplary embodiment depicted. The second goal is to find ahome for sale near the school where the teacher teaches. As shown inFIG. 1, the teacher on day one [1] visits Abraham Lincoln's Wikipediapage and creates question annotation [4] and then visits WoodrowWilson's Wikipedia page and creates question annotation [5]. As shown inFIG. 1, the teacher on day two [2] visits the Zillow page and creates adagger annotation of a house for sale near work [6]. As shown in FIG. 1,the teacher on day ten [3] sets up two collections entitled AmericanPresidents Study Guide and Real Estate [7], adds students to theAmerican Presidents Study Guide collection, and adds roommate to theReal Estate collection [8], moves question annotations about AbrahamLincoln and Woodrow Wilson to the American Presidents study guide [9],moves dagger annotations about home for sale near work to the RealEstate collection [10], and shares American Presidents Study Guidecollection with students [11].

In FIG. 2, a flowchart of a student using an exemplary embodiment of anannotation capable web browser is shown. The student's goal is to answerthe study questions provided by the teacher. As shown in FIG. 2, thestudent on day eleven [12] visits Abraham Lincoln's Wikipedia page [14],reads Abraham Lincoln's Wikipedia page [15], sees teacher's closedquestion displayed annotation symbol while reading Abraham Lincoln'sWikipedia page [16], clicks teacher's closed question displayedannotation symbol causing question displayed annotation symbol totransition to open state and show teacher's annotation comment [17], andreplies to teacher's question annotation comment with answer [18]. Asshown in FIG. 2, the student on day twelve [13] visits Woodrow Wil-son'sWikipedia page [19], reads Woodrow Wilson's Wikipedia page [20], seesteacher's closed question displayed annotation symbol while readingWoodrow Wilson's Wikipedia page [21], clicks teacher's closed questiondisplayed annotation symbol causing question displayed annotation symbolto transition to open state and show teacher's annotation comment [22],and replies to teacher's annotation comment with answer [23].

In FIG. 3, an exemplary embodiment of an annotation capable web browser[24] is presented. The short, wide horizontal rectangles displayed inthe viewing area of the web browser that is depicted represents text.There are 11 rectangles representing 11 lines of text in the firstparagraph, and there are 5 rectangles representing 5 lines of text inthe second paragraph. In this exemplary embodiment, a web browser thatsupports the addition of web extensions was modified with an exemplaryexample of a web browser extension [25] that adds annotationcapabilities. The web browser extension [25] is a software packagetypically residing on a non-transitory computer readable medium that canbe loaded into memory by a web browser, supporting the addition of webextensions, wherein the web browser application itself is a softwareapplication loaded in memory and running on a processor of an electroniccomputing device. Once the web browser application loads the web browserextension [25] into memory, the web browser extension [25] instructionset can be triggered by the web browser application's instruction set atspecified points in the web browser's life cycle. Some of the effects ofthe web browser extension [25] instruction set on the user interfacepresented to a user are shown in FIG. 5, FIG. 6, FIG. 7, FIG. 8, FIG.12, FIG. 13, FIG. 23, FIG. 46, FIG. 47, FIG. 48, and FIG. 49.

In FIG. 4, an exemplary embodiment of an annotation capable web browser[24] is shown after the user selects text, which is called ordinaryhighlighted text [26], and before the web browser extension [25]instruction set is triggered.

In FIG. 5, an exemplary embodiment of an annotation capable web browser[24] is shown after the user selects text and after the web browserextension [25] instruction set is triggered, which causes the annotationsymbol selection button bar [28] to appear. Furthermore, the selectedtext will be called annotation highlighted text [27] to distinguish itfrom ordinary highlighted text [26] as shown in the state of theexemplary embodiment depicted in FIG. 4. The ordinary highlighted text[26] is the selected text before the web browser extension [25]instruction set is triggered or the selected text in a web browser thatdoes not have annotation capabilities. The web browser extension [25]instruction set handles the input after the user clicks any of thebuttons depicted in the annotation symbol selection button bar [28] inFIG. 5.

In an exemplary embodiment, FIG. 6 depicts the effect of the userclicking the question mark annotation symbol button in the annotationsymbol selection button bar [28] illustrated in FIG. 5. In analternative exemplary embodiment, the annotation symbols shown in theannotation symbol selection button bar [28] in FIG. 5 can be placed ontop of each in a vertical column as opposed to a horizontal row. In theexemplary embodiment depicted in FIG. 6, the open question displayedannotation symbol [29] and the annotation comment input box [30] areshown. The open question displayed annotation symbol [29] allows theuser to indicate that the user plans to input a question about theannotation highlighted text [27] into the annotation comment input box[30]. The annotation comment input box [30] is an input area for theuser of the annotation capable web browser [24] to input text that willbe stored by one or more computer systems. Once the user finishesinputting text and conveys the completing of the action of inputtingtext to the annotation capable web browser [24], the web browserextension [25] instruction set transitions the annotation capable webbrowser [24] to the state depicted in FIG. 7.

In the exemplary embodiment depicted in FIG. 7, the state of theannotation capable web browser [24] is shown after an annotation hasbeen created and the displayed annotation symbol is visually displayedin the open state. The displayed annotation symbol in the open statedisplays screen elements including the annotation highlighted text [27],the annotation comment [32], the reputation selector [33], the openquestion displayed annotation symbol [29], and the annotation commentbox [31]. The annotation comment [3] comes from the text input by theuser as previously described. The annotation comment box [31] also has acontextual variant annotation control bar [34]. The contextual variantannotation control bar [34] allows the user, depending on access controlrules, to change privacy settings, share by social media or email, flagan annotation, or delete an annotation. The reputation selector [33]allows the user to select a reputation to assign to the annotationcomment [32]. For instance, the user can assign a thoughtful reputationto the annotation comment [32] if the user believes the comment wasthoughtful. By clicking outside the annotation highlighted text [27],open question displayed annotation symbol [29], and annotation commentbox [31]; the user can cause the displayed annotation symbol totransition to the closed state, which closes the annotation. In analternative embodiment, the reputation selector [33] can potentially bedisplayed inside the contextual variant annotation control bar [34] asopposed to being placed adjacent to the annotation comment [32].

In the exemplary embodiment depicted in FIG. 8, the state of theannotation capable web browser [24] is shown after an annotation hasbeen created and the displayed annotation symbol is displayed in theclosed state. The closed question displayed annotation symbol [35] isshown in FIG. 8. The closed question displayed annotation symbol [35] isdesigned to be visible but not distract the user from the rest of thetext.

After a user creates an annotation using the annotation capable webbrowser [24], a bundle of data elements representing an annotation issent to a server. This bundle of data elements can be used to constructan annotation item box [36], in a separate context area, as shown in theexemplary embodiment depicted in FIG. 9. In the exemplary embodimentdepicted in FIG. 9, the annotation item box [36] contains a screenshotwith marked text [37], separate context annotation highlighted text[38], separate context question displayed annotation symbol [39],separate context annotation comment [40], separate context variantannotation control bar [41], and separate context reputation selector[42]. The screenshot with marked text [37], in this exemplaryembodiment, is a thumbnail size associated marked screenshot intended toallow the user to determine the web page on which the annotation residesand the location of the annotation within the web page. FIG. 7 and FIG.9 can be viewed as two different contexts of the same exemplaryembodiment or two different exemplary embodiments. For the purpose ofunderstanding the separate context annotation highlighted text [38],separate context question displayed annotation symbol [39], and separatecontext annotation comment [40]; it is helpful to view these two figuresas two different contexts of the same exemplary embodiment. The separatecontext annotation highlighted text [38] presents the annotationhighlighted text [27] in the separate context area of the annotationitem box [36]. The description of separate context area in thissituation indicates that the context is different from the original webpage or web document on which the annotation highlighted text [27]occurs. The separate context question displayed annotation symbol [39]presents the question annotation symbol in the separate context area ofthe annotation item box [36]. The separate context annotation comment[40] presents the annotation comment [32] in the separate context areaof the annotation item box [36]. The separate context variant annotationcontrol bar [41] is intended to allow the user to change the privacysettings, share by social media or email, associate a categorizingreputation to the annotation, and delete the annotation.

If an item box is representative of an annotation, it is referred to asan annotation item box [36], which is depicted in the exemplaryembodiment in FIG. 9. In an exemplary embodiment, an item box mayrepresent web pages, documents, pictures, videos, sound recordings, aswell as annotations of web pages, documents, pictures, videos, and soundrecordings. An item box can be a web page item box, document item box,picture item box, video item box, sound recording item box, annotationitem box, picture annotation item box, video annotation item box, soundrecording annotation item box, embedded picture annotation item box,embedded video annotation item box, embedded sound recording item box,annotation group item box, derived annotation group item box, andannotation group with derived annotations item box. Collections arerepresentative of groups of items that include annotations, andwriteable collections are those collections that a user can modify insome way. One form of modification is adding an item to a writeablecollection. Collections are used to organize items including annotationsinto meaningful groups. As an example, in FIG. 1, a teacher created twocollections with one entitled American Presidents Study Guide andanother entitled Real Estate.

In the exemplary embodiment depicted in FIG. 9, the annotation item box[36] contains a separate context reputation selector [42] in theseparate context variant annotation control bar [41] that allows users,with whom the annotation in the form of the annotation item box [36] isshared, to vote on a reputation by selecting it from the drop-down. Thisreputation is assigned to the annotation. This reputation has valuewithin a social community. Annotations with reputations for beinguseful, funny, or thoughtful as well as those expressing dissent withthe annotation highlighted text can be selectively displayed based onvarious criterion chosen by the user and determined to be useful by theannotation server [61], which is shown in some of the other figures.Users can filter annotations based on this criterion, and user'saggregate reputation can also be connected to the reputation ofannotations the user creates. In contrast to star-based voting,detailed, annotation-specific semantic information can be gathered fromusers about the reason an annotation is worthwhile to other users withinan online community.

Furthermore, an annotation system functions better when users can replyto annotations in addition to assigning the annotation a reputation. Inaddition, other users can also vote on the reputation of a reply. Thissystem helps the community identify annotations that may be inaccuratesince users are providing feedback through replies and reputations.

Both the exemplary embodiment depicted in FIG. 7 and the exemplaryembodiment depicted in FIG. 9 represent annotations. FIG. 7 representsan annotation embedded within the web document that it is annotatingwhile FIG. 9 represents an annotation outside the web document. SinceFIG. 9 does not have the surrounding context of the web document, athumbnail marked screenshot is provided to give users looking at theannotation item box [36] more context. FIG. 7 and FIG. 9 can potentiallydepict two contexts of the same exemplary embodiment, or they canpotentially depict two different exemplary embodiments. Both FIG. 7 andFIG. 9 allow reputation voting. In FIG. 7, a reputation selector [33]allows a user to assign a reputation to the annotation comment [32]. InFIG. 9, a separate context reputation selector [42] allows a user toassign a reputation to the annotation comment [32]. This allows userswith whom the annotation is shared to evaluate the annotation'sreputation from different contexts.

In the exemplary embodiment depicted in FIG. 9, the annotation item box[36] contains the separate context variant annotation control bar [41]that allows the user to alter the privacy settings. In the exemplaryembodiment, a dark grey color indicates the most private setting inwhich no one except the creator of the annotation can view theannotation, a light grey color indicates the annotation can be sharedwith users in certain groups, and a white color indicates the annotationcan be viewed by all users of the platform.

One of the separate context areas in which the annotation item box [36]depicted in FIG. 9 can be rendered is in the annotation organizationcontext area [43] of the exemplary embodiment depicted in FIG. 10. Theannotation organization context area [43] of FIG. 10 also contains anitem bin [44] to display item boxes and a writeable collection bin [45]to display writeable collections. In FIG. 9, an annotation item box [36]is depicted inside the item bin [44], and a displayed writeablecollection [50] is depicted inside the writeable collection bin [45].Furthermore, the search filter [46] can be used to change the item boxesdisplayed in the item bin [44]. Furthermore, the collection searchfilter [47] can be used to change the displayed writeable collectionsdisplayed in the writeable collection bin [45]. In addition, the pagingmechanism [48] can be used to change the page of item boxes displayed inthe item bin [44], and the collection paging mechanism [49] can be usedto change the collection page of displayed writeable collectionsdisplayed in the writeable collection bin [45].

In the exemplary embodiment depicted in FIG. 10, we see a pagingmechanism [48] in the item bin [44] and a collection paging mechanism[49] in the writeable collection bin [45]. These paging mechanismsoperate independently. The paging mechanism [48] in the item bin [44]moves forwards and backwards through a page of 6 items in the exemplaryembodiment displayed. The items that are shown in FIG. 10 representannotations. All these items are sequentially ordered. When the pagingmechanism is moved forward, the next 6 items in the sequentially orderedset of items are shown. When the paging mechanism is moved backward, theprevious 6 items in the sequentially ordered set of items are shown. Thecollection paging mechanism [49] in the writeable collection bin [45]moves forwards and backwards through a page of 3 collections in theexemplary embodiment displayed. The collections that are shown in FIG.10 represent a group of items including annotations. Each collection isrepresentative of a group of one or more items, and the items includeweb page items, document items, picture items, video items, soundrecording items, annotation items, picture annotation items, videoannotation items, sound recording annotation items, embedded pictureannotation items, embedded video annotation items, embedded soundrecording items, annotation group items, derived annotation group items,and annotation group with derived annotations items. All thesecollections are sequentially ordered. When we move the paging mechanismforwards, the next 3 items in the sequentially ordered set ofcollections is shown. When we move the paging mechanism backwards, theprevious 3 items in the sequentially ordered set of collections isshown. As the viewable area of the browser changes after resizingoperations, the number of displayed items in the item bin [44] anddisplayed writeable collections in the writeable collection bin [45]changes. In an alternative exemplary embodiment, an explicit writeablepermission may not exist. In this case, the writeable collection bin[45] will include displayed collections. The paging mechanism [48] andcollection paging mechanism [49] account for this shift and then operatewith the new page sizes.

In FIG. 10, we also see pins in every annotation item box [36] locatedin the item bin [44] in addition to the paging mechanism [48]. In theexemplary embodiment that is displayed in FIG. 10, 6 itemsrepresentative of annotations are shown. Each one of these 6 items canbe in an unpinned state or a pinned state. As displayed, the page sizeis 6. If one of these items is pinned, the page size is reduced to 5. Asa result of the pinning, the pinned item stays in the viewing area whenthe paging mechanism [48] is moved forwards or backwards. When thepaging mechanism [48] is moved forward, the pinned item remains in theviewing area, and the remaining 5 items are removed from the viewingarea. Then, the next 5 items in the sequential ordering replace the 5items that are removed. If the paging mechanism is moved backwards, the5 unpinned items are removed from the viewing area, and the previous 5items in the sequential ordering of items replace the 5 items that wereremoved from the viewing area. If 2 items are pinned, the page size isreduced to 4. Pinning works similarly for the collections in thewriteable collection bin [45].

Whenever an item is pinned, the pinned item is excluded from the set ofitems sequentially ordered by the annotation server [61] shown in someof the other figures. This avoids having the pinned item appear twice inthe viewing area. If 2 items are pinned, the 2 pinned items are excludedfrom the set of items sequentially ordered by the annotation server[61]. The exclusion of items from the sequential ordering is done inaddition to changing the page size. Sequential order exclusion by theannotation server [61] works in a similar way for the collections in thewriteable collection bin [45].

Filters such as the search filter [46] shown in the exemplary embodimentin FIG. 10 are used to receive inputs from users. In the case of theitem bin [44] search filter [46], it is a search phrase. These inputsare translated into parameter values sent to the annotation server [61],which is shown in some of the other figures. These parameter values areused by the annotation server [61] to input parameters into a requestquery that is used by the electronic database [62], which is shown insome of the other figures. The request query includes parameter valuesand a page number. The request query with parameter values is used tospecify a set of items and a sequential ordering on those items. Thepage number specifies a specific page. Furthermore, the request querymay include a specified number of items that are to be sent to the webbrowser running on the client electronic device. This request querycontains parameters for filter values such as search phrases and anexclusion list of items to exclude from the specified list of items,wherein the request query along with the parameters and exclusion listof items introduces a sequential ordering on that list of items.

Filters such as the collection search filter [47] shown in the exemplaryembodiment in FIG. 10 are used to receive inputs from users. In the caseof the writeable collection bin [45] collection search filter [47], itis a collection search phrase. These inputs are translated intoparameter values sent to the annotation server [61], which is shown insome of the other figures. These parameter values are used by theannotation server [61] to input parameters into a collection requestquery that is used by the electronic database [62], which is shown insome of the other figures. The collection request query includesparameter values and a page number. The collection request query withcollection parameter values is used to specify a set of collections anda sequential ordering on those collections. The page number specifies aspecific page. Furthermore, the collection request query may include aspecified number of collections that are to be sent to the web browserrunning on the client electronic device. This collection request querycontains parameters for collection filter values such as the collectionsearch phrase and an exclusion list of collections to exclude from thespecified list of collections, wherein this collection request queryalong with the parameters and exclusion list of collections introduces asequential ordering on that list of collections.

After a user creates an annotation, the annotation appears in item bin[44] in the exemplary embodiment depicted in FIG. 10. Using a drag anddrop process, the user can either move or duplicate an annotation itembox [36] into a collection as in the exemplary embodiment depicted inFIG. 11. In the exemplary embodiment depicted in FIG. 11, a movingannotation item box [51] is depicted. As the moving annotation item box[51] approaches a displayed writeable collection [50] as in the state ofthe exemplary embodiment depicted in FIG. 10, the visual form of thedisplayed writeable collection [50] changes as depicted in FIG. 11,displaying screen elements including a move target [52] and aduplication target [53]. In this exemplary embodiment, if the mousepointer depicting the dragging of the moving annotation item box [51] isin the area denoted by the move target [52] and released, the movementaction is triggered. In this exemplary embodiment, if the mouse pointerdepicting the dragging of the moving annotation item box [51] is in thearea denoted by the duplication target [53] and released, theduplication action is triggered.

In the exemplary embodiment depicted in FIG. 12, a user is presented aclosed question displayed annotation symbol [35], a closed exclamationdisplayed annotation symbol [54], a closed check displayed annotationsymbol [55], and a closed incorrect displayed annotation symbol [56].These four annotation symbols are examples of displayed annotationsymbols. In the exemplary embodiment, displayed annotation symbols haveat least two possible states. These states include open and closed. Inthe closed state, the displayed annotation symbol is visible. Thedisplayed annotation symbols are designed to have low visibility toavoid distracting the user while reading the web document. In the openstate, additional information is displayed in the web browser viewingarea. In the exemplary embodiment in FIG. 7, a displayed annotationsymbol in the open state is depicted. This displayed annotation symbolis a question displayed annotation symbol. In the exemplary embodimentin FIG. 7, the open question displayed annotation symbol [29] is shownalong with the annotation highlighted text [27] and the annotationcomment box [31].

Annotation symbols are associated with elements of a group of annotationsemantic relationships. Each annotation semantic relationship shows arelationship, typically based on a user selection, between theannotation highlighted text [27] and the annotation comment [32] asdepicted in the exemplary embodiment in FIG. 7. Associated to eachrelationship in the group of annotation semantic relationships is adifferent annotation symbol. As an example, a closed question displayedannotation symbol [35], as depicted in the exemplary embodiment in FIG.8, indicates the creator of the annotation marked the annotation commentas being a question about the annotation highlighted text. This closedquestion displayed annotation symbol [35] allows a user familiar withhow the exemplary embodiment works to know that the user can click onthe closed question displayed annotation symbol [35] and see anannotation comment that is a question about the annotation highlightedtext [27], as depicted in FIG. 7, before the user actually performs theaction of clicking.

Once clicked, the closed question displayed annotation symbol [35], asin the state of the exemplary embodiment depicted in FIG. 8, becomes anopen question displayed annotation symbol [29] showing the annotationhighlighted text [27] and the annotation comment box [31], as in thestate of the exemplary embodiment depicted in FIG. 7. Its also possible,in the state of the exemplary embodiment depicted in FIG. 8, forannotation highlighted text [27], open question displayed annotationsymbol [29], and annotation comment box [31] to become visible onmouseover of the closed question displayed annotation symbol [35], as inthe state of the exemplary embodiment depicted in FIG. 8, and becomepinned with a click. To improve automatic recognition for the user, theannotation highlighted text [27] in FIG. 7 can be assigned a color basedon its annotation symbol. In other words, the color of the annotationhighlighted text [27] is based on the annotation semantic relationshipbetween the annotation highlighted text [27] and the annotation comment.

To further illustrate the exemplary embodiment, observe the following.The closed exclamation displayed annotation symbol [54] indicates thecreator of the annotation marked the annotation comment as being anexclamatory statement, which indicates a point of caution or aninteresting fact about the annotation highlighted text. A closed checkdisplayed annotation symbol [55], indicates the creator of theannotation marked the annotation comment as being a statement thatagrees with the annotation highlighted text. And, a closed incorrectdisplayed annotation symbol [56] indicates the creator of the annotationmarked the annotation comment as being a statement that disagrees withthe annotation highlighted text.

In addition to the annotation symbols that have been discussed and thedisplayed annotation symbols depicted in FIG. 12, an advertisementannotation symbol can be used to indicate another relationship in thegroup of annotation semantic relationships. This relationship indicatesthat the annotation comment [32], as in the state of the exemplaryembodiment depicted in FIG. 7, is an advertisement related to theannotation highlighted text [27]. In this situation, the closed questiondisplayed annotation symbol [35], as in the state of the exemplaryembodiment depicted in FIG. 8, would be replaced by an advertisementdisplayed annotation symbol.

In the exemplary embodiment depicted in FIG. 12, we see severaldisplayed annotation symbols. In this exemplary embodiment,corresponding to the question annotation symbol, disagreement annotationsymbol, agreement annotation symbol, exclamation annotation symbol, andadvertisement annotation symbol are five relationships in the group ofannotation semantic relationships. These annotation semanticrelationships are the question relationship, disagreement relationship,agreement relationship, exclamatory relationship, and advertisementrelationship.

In an exemplary embodiment, machine learning and deep learning modelscan be used to automatically determine the annotation semanticrelationship between the annotation highlighted text and annotationcomment. Furthermore, the user data that is collected with usersdetermining the annotation semantic relationship and writing annotationcomments can be used to train deep learning models, and the by-productsof these trained models can be used for other natural languageprocessing purposes. Users can be given the option to opt-in or opt-outof the use of the data that the user creates for the purpose of trainingdeep learning based natural language processing models. A bidirectionallong short-term memory (BiLSTM) model with a final max-pooling layer canbe used to compute sentence embeddings. Other machine learning and deeplearning methods can also be used to create sentence embeddings.Sentence embeddings can be used to determine the similarity of twosentences. Once sentence embeddings are calculated for all sentences ina collection through the analysis of annotation highlighted text,annotation comments; and other sentences occurring in items and replies;these sentence embedding vectors can be used to determine whether anitem is similar to other items in a collection or deter mine thesimilarity of two collections. Based on this similarity analysis, itemscan be suggested to users for reading, engaging in discussion with otherusers, or addition into a collection. Similar collections can besuggested to users based on collections the user searches, reads, orcontributes to. In addition, annotations on a web page can link tosimilar annotations or content in other web pages or documents based onsimilarity analysis based on sentence embedding vectors. A convolutionneural network (CNN) model can be used in conjunction with the sentencesimilarity classifier to verify the annotation semantic relationshipspecified by users. The user-provided annotation semantic relationshipdata can be used in conjunction with user reputation to validate theuser selection of annotation semantic relationships and to potentiallyidentify inappropriate content generated and posted by users.Bidirectional encoder representations from transformers (BERT) can beused to identify named entities within web pages and web documents andauto-annotate items of potential interest to a user. These namedentities can be entities present in Wikipedia or products for sale ononline market places. For moderation of user-generated annotations,pre-trained. BERT that are fine-tuned for sentiment analysis can be usedto flag inappropriate user-generated content.

In the exemplary embodiment depicted in FIG. 13, a user triggers thesymbols beacon by pressing the symbols beacon trigger button [57] tomake the closed displayed annotation symbols more salient. The symbolsbeacon can be in the untriggered state or the triggered state. When thesymbols beacon trigger button [57] was pressed, the symbols beacontransitioned from the untriggered state to the triggered state. Thetrigger mechanism for the symbols beacon can also be a sequence ofkeyboard key presses or mouse button clicks. The trigger mechanism canalso be located in a menu option within an annotation capable webbrowser [24]. Whether it is a button available in the display area ofthe annotation capable web browser [24], a menu option in the annotationcapable web browser [24], a combination of keyboard key presses andmouse button clicks, input gesture on a touch screen device, or inputgesture through an input device; it is the web browser extension [25]instruction set that makes these triggers available and triggers onedisplayed annotation symbol beacon [58] for each displayed annotationsymbol.

Next, sequence diagrams are presented showing how messages are sentbetween the different entities. Messages include user input into anannotation capable web browser [24] or an ordinary web browser as wellas electronic messages between electronic devices and computer systems.The annotation capable web browser [24] is shown in the exemplaryembodiment in FIG. 3. These sequence diagrams apply to a class ofexemplary embodiments. After the sequence diagrams are presented,variations of some of the messages will be presented. By specifying themessages more precisely, a specific exemplary embodiment can bediscussed.

FIG. 14 shows a sequence diagram that applies to a class of exemplaryembodiments. In FIG. 14, a sequence diagram shows interactions betweenthe user [59], annotation capable web browser [24], server for URL [60],annotation server [61], electronic database [62], and content deliverynetwork [63]. After user [59] visits URL [64], annotation capable webbrowser [24] requests web document [65] and server for URL [60] returnsweb document [66], and then annotation capable web browser [24] showsdocument [67] to user [59]. Next, user [59] enters input to createannotation [68], after which annotation capable web browser [24] sendsbundle of data elements representing annotation [69] to annotationserver [61], which sends images for storage if present [70] to contentdelivery network [63], which returns URLs for sent images [71]. Next,annotation server [61] sends instruction to store non-image bundle ofdata elements and URLs from CDN as annotation object [72] to electronicdatabase [62], which acknowledges storage of annotation object [73].Afterwards, annotation server [61] acknowledges bundle of data elementsreceived and sends annotation display bundle [74] to annotation capableweb browser [24], which shows displayed annotation bundle, indicatingannotation successfully created [75], to user [59]. In [69], referenceis made to a bundle of data elements representing an annotation. Thebundle of data elements can vary depending on the implementation detailsof the exemplary embodiment and the type of annotation.

In FIG. 14, a sequence diagram was presented that applied to a class ofexemplary embodiments. Depending on the characteristics of the bundle ofdata elements representing an annotation or highlighted text, theannotation server [61] may record different data, and the annotationcapable web browser [24] may display different views due to the factdifferent data is received, and different data is available to choosefrom when generating a displayed representation of the annotation orhighlighted text. Next, screenshot bundles and annotation symbolbundles, which could play the role of the bundle of data elements inFIG. 14, will be discussed in an exemplary embodiment. In addition, FIG.14 could apply to an exemplary embodiment where the annotation displaybundle is a screenshot display bundle or an annotation symbol displaybundle. Corresponding to a screenshot bundle is a screenshot displaybundle, and corresponding to an annotation symbol bundle is anannotation symbol display bundle. These corresponding pairs are usedwhere FIG. 14 uses bundle of data elements and annotation displaybundle.

A screenshot bundle in an exemplary embodiment includes a uniformresource locator (URL) for a document, data for representing a selectedpiece of text from the document with the selected piece of textrepresenting an annotation, and a marked screenshot of a portion of thedocument showing the selected piece of text with the selected piece oftext being visually marked. The screenshot bundle may also includeinformation for finding the selected piece of text in the document. Thisinformation for finding the selected piece of text in the documenttypically includes document object model (DOM) information. Anannotation screenshot bundle is a screenshot bundle that also includesan annotation comment [32], as shown in the exemplary embodimentdepicted in FIG. 7. Screenshot bundles can also include data forrepresenting an annotation symbol. Screenshot bundles can be usedwithout an annotation comment [32]. In such cases, data representinghighlighted text without an annotation comment [32] along with anassociated marked screenshot representative of the highlighted text isin the screenshot display bundle.

An annotation symbol bundle in an exemplary embodiment includes auniform resource locator (URL) for a document, data for representing aselected piece of text from the document with the selected piece of textrepresenting an annotation, an annotation comment [32], and anannotation symbol. The exemplary embodiment in FIG. 7 may be a helpfulreference. The screenshot bundle also includes information for findingthe selected piece of text in the document. This information for findingthe selected piece of text in the document typically includes documentobject model (DOM) information. Annotation symbol bundles can alsoinclude a marked screenshot of a portion of the document showing theselected piece of text with the selected piece of text being visuallymarked. Depending on the desired behavior, a marked screenshot may ormay not be required.

In an exemplary embodiment, the DOM information for finding the selectedpiece of text in the document may include information for finding theelement in the DOM that contains the first character of the selectedtext and for finding the element in the DOM that contains the lastcharacter of the highlighted text as well as the highlighted textitself. These two elements are called the highlighted text startingelement and the highlighted text ending element. The informationrecorded about the highlighted text starting element and the highlightedtext ending element is the tag, id, class, index, content, xpath, andparent. Furthermore, the ancestor element of the highlighted textstarting element is recorded. The tag, id, class, index, and content arerecorded for the ancestor element of the highlighted text startingelement. To locate the specified highlighted text at a later point intime, the DOM is searched by tag and id, then xpath, then tag and classand index, then tag and class, then tag and index, and then just thetag. A simple xpath search is not sufficient because edits may have beenmade to the web page, or the web page's DOM structure may change as aresult of the execution of JavaScript code that inserts elements intothe DOM. In this exemplary embodiment, the goal is to find the selectedtext even if edits have been made to the web page. To facilitate findingthe selected text in different scenarios, multiple search methods areused. Once the highlighted text starting element and highlighted textending element are located, finding the selected highlighted text iseasier.

Another concern is the insertion of elements into the web page's DOM byJavaScript code on the visited web page. These inserted elements canalso be annotated. To facilitate this process, the browser's mutationobserver can be used. Once the changes are detected, the DOM structuredetection code can be rerun. If the highlighted text starting elementand highlighted text ending element are found, the highlighted text canbe inserted. For annotation highlighted text, the displayed annotationsymbol can also be inserted.

If the transmitted screenshot bundle or annotation symbol bundlecontains a marked screenshot, a storage set of images is created fromthis marked screenshot by various operations including resizing,cropping, and image alteration. These operations are carried out togenerate images that will look good in different viewing areas ondifferent sized screens. Once this storage set of marked screenshots iscreated, determining whether to store these marked screenshots in acontent delivery network (CDN) is worthwhile. For thumbnail markedscreenshots, there might be benefits of storing the data with all theother data in the screenshot bundle or the annotation symbol bundle. Forlarger marked screenshots, it is usually better to store these imagesusing a CDN that can also make these images available for delivery. Theannotation server [61], as shown in some of the figures, typicallydecides which images in the storage set to store in the electronicdatabase [62], as shown in some of the figures, and which images to sendto the CDN. The CDN typically replies with a URL when an image isstored. These URLs are stored with the rest of the screenshot bundle orannotation symbol bundle.

A deliverable screenshot is either an actual image or URL stored in theelectronic database [62], as shown in some of the figures. When the datais transmitted to a client device, the URL can be used to fetch theimage from the CDN. If the image is sent directly, it can simply bedisplayed. Ultimately, it is the annotation object that is stored in theelectronic database [62]. The annotation object typically includes allthe received data in the screenshot bundle or annotation symbol bundlealong with deliverable screenshots for each marked screenshot in thestorage set.

In order for advertisers to reach customers with relevant advertisementsrelated to the content users are currently engaging with, advertisementscreenshot bundles and advertisement annotation symbol bundles canpotentially be deployed along with their respective advertisementscreenshot display bundles and advertisement annotation symbol displaybundles. The displayed advertisement screenshot bundle is the visuallydisplayed form of the data in the advertisement screenshot displaybundle, and the displayed advertisement annotation symbol bundle is thevisually displayed form of the data in the advertisement annotationsymbol display bundle. FIG. 7 can be used for illustrative purposes, butthe displayed annotation symbol is replaced by an advertisementdisplayed annotation symbol. In the exemplary embodiment, theadvertisement screenshot bundle contains an annotation comment [32]created by an advertiser that is relevant to the annotation highlightedtext [27]. The advertisement annotation symbol bundle contains anannotation symbol denoting an advertisement. While annotation symbolbundles contain an annotation symbol, a screenshot bundle may alsoinclude an annotation symbol. While screenshot bundles contain a markedscreenshot, an annotation symbol bundle may also contain a markedscreenshot. FIG. 9 can be used for illustrative purposes, but thedisplayed annotation symbol is replaced by an advertisement displayedannotation symbol. Furthermore, the annotation comment is created by anadvertiser along with the other elements, but the overall form shouldresemble other annotation item boxes. When marked screenshots areincluded, engineering a performant system may require the creation ofstorage sets and the use of a CDN for distributing these markedscreenshots. In the exemplary embodiment, these advertisement screenshotbundles and advertisement annotation symbol bundles are often store andmanaged through an advertisement server that communicates with theannotation server. The advertisement server is not explicitly shown inthe sequence diagrams but can be inserted. To incorporate a singleadvertisement, the page size can be reduced by one. After the annotationserver [61], as shown in some of the figures, prepares a page of itemsrepresenting annotations, the annotation server [61] can communicatewith the ad server to get 1 advertisement.

The semantic web provides semantic descriptions of some web pages anddocuments available on the WWW through ontologies that areimplementations of a certain type of description logic. These ontologiesneed to be created for different domains, and these ontologies have theability to express concepts within that domain in a logical form as donewith description logics. Collections of pre-existing ontologies areavailable through projects such as KBPedia and others. Descriptionlogics are a family of logics defined in mathematical logic that havesome of the characteristics of first-order logic. Depending on theproperties of the family of logic, it has different computationalcharacteristics. Using an ontology that exists, logical statements canusually be made. In an exemplary embodiment, these logical statementscan be translated into natural language, and some sentences in naturallanguage can be translated into a statement made within a descriptionlogic using neural machine translation techniques. Other deep learn-ingtechniques can also be used. Machine learning and deep learning modelscan translate some natural language sentences into statements in aparticular ontology. Within this exemplary embodiment, this methodologycan be used for advertisement purposes. An advertiser can expressconcepts and write logic statements about the product or service withinan ontology that pertains to the product or service. These logicstatements can then be entered into an ad platform. The ad server canthen identify web pages and documents that contain natural language textthat can be translated into a statement in the ontology chosen by theadvertiser to express a concept about the product or service beingadvertised. Furthermore, the ad server can determine which of these webpages and documents contain natural language text expressing statementssimilar or logically related to the one expressed by the advertiser.Once these web pages and documents along with the corresponding locationwithin the document are identified, the advertiser can be given theopportunity to advertise at that particular location on the web page ordocument or somewhere that links to that particular location. Utilizinglogic analyzers, different consequences of statements that occur in webpages or documents can be determined. Using this information, the set ofweb pages or documents along with location within the document can benarrowed to find the best potential fits for an advertiser. Throughpicture captioning, voice recognition, and text summarization; pictures,videos, and sound recordings can be translated into text. In some cases,this text can be translated into statements within the same ontologyused by the advertiser. After this is done, logic analyzers can be usedto determine the most suitable candidates to show to the advertiser forconsideration by the advertiser. Based on the advertiser's selection;the ad platform can generate ads to place in the ad server. Furthermore,in this exemplary embodiment, ontologies can be created for the purposeof expressing facts about products and services for sale in differentdomains such as insurance, financial services, legal services, andhealthcare. These ontologies can then be used by various groupsadvertising and selling services in these domains to create logicallycorrect and expressive statements about their products and services tothen search for media such as web pages, web documents, pictures,videos, and sound recordings. This media can then reach audiencesconsuming this media, and the advertiser can know that this audience islikely to have familiarity with the statements made by the advertiser inthe ontology. Furthermore, in this exemplary embodiment, the mediasource itself has a logical relationship with the advertiser'sstatement, and the advertiser can use this logical relationship toprovide more tailored products and more tailored targeting fulfilling acustomer's needs.

For FIG. 14 to specify the details of an exemplary embodiment, thebundle of data elements along with details about the storage set and thedeliverable screenshot should be specified. The bundle of data elementscan be a screenshot bundle with its associated data elements. The bundleof data elements can also be an annotation symbol bundle with itsassociated data elements. The storage set, the size, resolution,cropping, and other properties of different types of marked screenshotsshould be determined. This is usually based on considerations of thetype of display on which these marked screenshots will be displayedalong with the size of the displayed view. In some cases, thumbnailmarked screenshots will be in the storage set. When these thumbnails aresmall in size, storing these images using a CDN may not be the mostefficient approach. It may be more efficient to store the image in theelectronic database [62], a local file system, or other local locationas opposed to a content delivery network [63]. Specifying whether thedeliverable screenshot is an actual image or a URL stored in theelectronic database is another decision that should be taken intoaccount to specify the details of the implementation. It should be clearto those persons having ordinary skill in the art that a variety ofminor variations can be introduced for storing and retrieving images. Itshould also be clear to those persons having ordinary skill in the artthat these variations are interchangeable, and the differences areinsubstantial.

The electronic database [62], in FIG. 14 and some of the other figures,can take a variety of forms varying from a relational database to anon-relational database. Furthermore, the electronic database [62] maybe a distributed electronic database system implemented on one or morecomputer systems. The most advantageous characteristics of the databasemay vary depending on the number of database clients and the usagepatterns of these database clients. In the case of the exemplaryembodiment, the annotation server [61] is a database client. In order tohandle a large number of annotation servers with varying consistency,availability, and persistence needs as well as different latencyrequirements, the characteristics of the electronic database ordistributed electronic database system may vary. Furthermore,distributed electronic database systems can be implemented in a varietyof ways.

Furthermore, it should be noted that storing images in an electronicdatabase [62] can sometimes impact performance. In such cases, it isbeneficial to store references in the database and use another storagemechanism for certain images. In the case of a content delivery network[63], the reference is a URL. However, it is possible to store areference that is not a URL and then use an alternative mechanism tostore the image in a way that is retrievable using the reference storedin the electronic database. In an exemplary embodiment, the image can bestored on the local file system, and a reference in the database cancorrespond to the file's path. In such cases, the electronic databaseand the storage location should be viewed as a distributed electronicdatabase storing the image in a more performant manner. It should beclear to those persons having ordinary skill in the art that a varietyof minor variations on this technique can be introduced for storing andretrieving images. It should also be clear to those persons havingordinary skill in the art that these variations are interchangeable, andthe differences are insubstantial.

FIG. 15 shows a sequence diagram that applies to a class of exemplaryembodiments. For FIG. 15 to specify the details of an exemplaryembodiment, the annotation display bundles and displayed annotationbundles need to be specified. In addition, FIG. 15 can apply to anexemplary embodiment where annotation display bundles are replaced byscreenshot display bundles, and displayed annotation bundles arereplaced by displayed screenshot bundles. In this case, the screenshotdisplay bundles, with the data elements to include, need to bespecified, and the mechanism of retrieving deliverable screenshotsshould also be specified. The user interface diagrams, data elementsdescribed for screenshot bundles, and the considerations previouslydiscussed can be used to specify annotation display bundles anddisplayed annotation bundles. A displayed screenshot bundle is typicallyused when there is an annotation highlight and marked screenshot withoutan annotation comment. A displayed annotation screenshot bundle is usedwhen there is a marked screenshot, annotation highlight, and annotationcomment. In FIG. 15, a sequence diagram shows interactions between theuser [59], annotation capable web browser [24], annotation server [61],electronic database [62], and content delivery network [63]. After user[59] visits annotation server's URL [76], annotation capable web browser[24] requests annotation server's organize page [77] from the annotationserver [61], which requests annotation objects needed for organize page[78] from the electronic database [62], which returns annotation objects[79] to the annotation server [61]. Then, the annotation server [61]returns annotation server's organize page with annotation displaybundles [80] to the annotation capable web browser [24], which requestimages for URLs of annotation display bundles returned when annotationserver's organize page was returned [81]. Finally, the content deliverynetwork [63] returns requested images [82] to the annotation capable webbrowser [24], which shows organize page with displayed annotationbundles [83] to the user [59]. Next, the user [59] enters input to moveannotation [84] in the annotation capable web browser [24], whichrequests that annotation be moved [85] by the annotation server [61],which sends instruction to move annotation object [86] to the electronicdatabase [62]. In response, the electronic database [62] acknowledgesannotation object moved [87] to the annotation server [61], whichacknowledges annotation moved [88] to the annotation capable web browser[24], which shows content with displayed annotation bundle in newlocation [89] to the user [59].

The displayed annotation screenshot bundles or annotation item boxes arecreated using the data in the annotation screenshot display bundles sentfrom the annotation server [61], as shown in some of the figures. Theannotation screenshot display bundle is created using the data in theannotation objects retrieved from the electronic database [62], as shownin some of the figures. When viewing pages of annotations in ascreenshot bundles viewing area like the item bin [44] of the annotationorganization context area [43] of the organize web page as shown in theexemplary embodiment in FIG. 10, the data sent by the annotation server[61] is a page of thumbnail display bundles. These thumbnail displaybundles include at least the deliverable screenshot for the thumbnailmarked screenshot in the storage group of the annotation object storedin the electronic database [62]. FIG. 9 can be used for illustrativepurposes. In the exemplary embodiment, the thumbnail display bundlesalso contain data, in a readable form that can be displayed by a webbrowser, representing the separate context annotation highlighted text[38], separate context annotation comment [40], and separate contextquestion displayed annotation symbol [39]. Furthermore, the separatecontext annotation highlighted text [38] and the separate contextquestion displayed annotation symbol [39] are color-coded. All thesepieces of data working together give the user more information at aglance. The displayed annotation screenshot bundle can also be shown inan annotation details web page to provide more detailed informationabout one annotation along with remarks and replies from many usersabout that annotation.

FIG. 16 shows a sequence diagram that applies to a class of exemplaryembodiments. For FIG. 16 to explicitly specify an exemplary embodiment,the annotation symbol display bundles and corresponding displayedannotation symbol bundles, with the data elements to include along withthe visual appearance, need to be specified. The user interfacediagrams, data elements described for annotation symbol bundles, and theconsiderations previously discussed can be used to make thisspecification. In FIG. 16, a sequence diagram shows interactions betweenthe user [59], annotation capable web browser [24], server for URL [60],annotation server [61], and electronic database [62]. After user [59]visits URL [90], annotation capable web browser [24] requests webdocument [91] from the server for URL [60], which returns web document[92] to annotation capable web browser [24]. Next, the annotationcapable web browser [24] requests annotation symbol display bundlesrepresenting annotations [93] from the annotation server [61], whichrequests annotation objects [94] from the electronic database [62].Afterwards, the electronic database [62] returns annotation objects [95]to the annotation server [61], which returns annotation symbol displaybundles representing annotations [96] to the annotation capable webbrowser [24], which shows web document with closed displayed annotationsymbols and annotations available for opening when mousing over orclicking [97].

FIG. 17 shows a flow chart that applies to a class of exemplaryembodiments. A specific exemplary embodiment can be specified if thebundle of data elements that is received and stored is preciselyspecified. For example, we can explicitly specify a screenshot bundlewith all its data elements, or we can explicitly specify an annotationsymbol bundle with all its elements. In this case, the screenshot bundleor the annotation symbol bundle are the bundle of data elements that arereceived. Furthermore, the storage set and the storage mechanism of thedeliverable screenshots should be specified if the bundle of dataelements contains a marked screenshot. These details help illustrate animplementation. In an exemplary embodiment, the storage set can includea marked screenshot for display on large monitors, laptops, tablets, andphones as well as a thumbnail marked screenshot for item boxes. Theexact sizes can be adjusted to the most prevalent sizes of thesedisplays currently in use. Furthermore, the server, in a client-serverarchitecture, will receive a bundle of data elements representing anannotation [98] and store the received data elements and any newlycreated elements using one or more computer systems [99] in order tosatisfy requests made by the annotation capable web browser of a clientdevice of a user creating an annotation or a simple highlight. In FIG.17, a flowchart of a method implemented by one or more computer systemsrepresenting the server in a client-server architecture is shown. Thismethod is implemented by a server to enable the sharing of data that maybe requested by the client user interface of the same client or adifferent client. The steps of this method are receive a bundle of dataelements representing an annotation [98] and store the received dataelements and any newly created elements using one or more computersystems [99].

FIG. 18 shows a flow chart that applies to a class of exemplaryembodiments. A specific exemplary embodiment can be specified if thedata elements included in the bundles display set are preciselyspecified. This means specifying the data elements in a display bundle.In an exemplary embodiment, the display bundles can be screenshotdisplay bundles or annotation symbol display bundles. If the displaybundles are screenshot display bundles, the bundles display set would bea screenshot bundles display set in FIG. 18. If the display bundles areannotation symbol display bundles, the bundles display set would be anannotation symbol bundles display set in FIG. 18. Furthermore, theserver, in a client-server architecture, will compile bundles displayset including a page of display bundles using one or more computersystems [100] and transmit the bundles display set in a format thatallows the display bundles to be displayed by a web browser running onan electronic device [101] in order to satisfy requests made by theannotation capable web browser running on a client device of a userviewing a page of annotations within a web document or a separatecontext area. The flowchart shown in FIG. 18 is implemented by one ormore computer systems.

FIG. 19 shows a flowchart that applies to a class of exemplaryembodiments. A specific exemplary embodiment can be specified once thebundle of data elements is explicitly specified. For example, we canexplicitly specify a screenshot bundle with the data elements toinclude, or we can explicitly specify an annotation symbol bundle withthe data elements to include. In FIG. 19, a flowchart of annotationcreation is presented showing the steps carried out by the instructionset of the web browser extension that in the exemplary embodimenttransforms a web browser, supporting the addition of browser extensions,into an annotation capable web browser [24], as shown in some of thefigures. FIG. 19 shows the steps carried out by the user [59], webbrowser [102], web browser extension content script [103], and webbrowser extension background script [104] when creating an annotation.The user [59] opens browser [105], and then web browser [102] loadsbrowser extension [106]. Next, the user [59] visits URL [107], and thenweb browser [102] loads data sent from visited URL [108] and injectscontent script [109]. Now, the user [59] views web page [110] andhighlights text [111]. At this point, web browser extension contentscript [103] makes annotation symbol selection button bar available[112] as a result of the execution of the instructions in the webbrowser extension. Next, the user [59] presses button corresponding toone annotation symbol on annotation symbol selection button bar [113],and the web browser extension content script [103] makes annotationinput box available [114] in response. Next, the user [59] enters textand hits enter [115], and the web browser extension content script [103]sends bundle of data elements to background script [116]. At this point,the web browser extension background script [104] receives bundle ofdata elements from content script [117] and sends bundle of dataelements to annotation server [118].

In FIG. 19, after the user [59] enters text and hits enter [115], theweb browser extension content script [103] should generate either anannotation symbol bundle or a screenshot bundle. The exemplaryembodiment may require an annotation symbol bundle to include a markedscreenshot. If the marked screenshot is generated on the sever-side, theweb page may have to be rerendered or a screenshot may have to bemarked. Doing this would be computationally intensive and errorerror-prone. Generating the marked screenshot using the browserextension does not encounter these problems. The browser extensionshould ensure that the user's privacy is protected. Screenshots shouldnot include the desktop or other browser tabs. Furthermore, in theexemplary embodiment, the screenshot should be marked with theannotation highlighted text [27] and the annotation comment box [31].The annotation highlighted text [27] and the annotation comment box [31]appear in FIG. 7, which may be helpful for illustrative purposes in thiscase. In the exemplary embodiment, a simple delay can be implementedbefore a screenshot is taken. This delay should be sufficient to ensurethe annotation highlighted text [27] and the annotation comment box [31]are present on most devices. In an alternative exemplary embodiment, amore performant method can be implemented, wherein the web browserextension content script [103] searches for the presence of theannotation highlighted text [27] and the annotation comment box [31] inthe documents DOM structure and takes a screenshot once these elementsare present. The searches for the presence of the annotation highlightedtext [27] and the annotation comment box [31] in the documents DOMstructure would occur at periodic intervals at a timescale that isshorter than the simple delay time previously discussed. In an exemplaryembodiment, the periodic interval could be one third of the length ofthe simple delay that would have been chosen.

FIG. 20 shows a flowchart that applies to a class of exemplaryembodiments. A specific exemplary embodiment can be specified once thedisplayed annotation symbol bundle is explicitly specified with all itsdata elements. In FIG. 20, a flowchart of viewing annotations ispresented showing the steps carried out by the instruction set of theweb browser extension that in the exemplary embodiment transforms a webbrowser, supporting the addition of browser extensions, into anannotation capable web browser. FIG. 20 shows the steps carried out bythe user [59], web browser [102], web browser extension content script[103], and web browser extension background script [104] when viewing anannotation. The user [59] opens browser [119], and the web browser [102]loads browser extension [120]. Next, the user [59] visits URL [121], andthen web browser [102] loads data sent from visited URL [122] andinjects content script [123]. Now, the web browser extension backgroundscript [104] fetches annotation symbol display bundles representingannotations for URL [124] and sends annotation symbol display bundles tocontent script [125]. Now, the web browser extension content script[103] receives annotation symbol display bundles from background script[126] and displays annotation symbols in closed state on web page [127].Now, the user [59] views web page with closed displayed annotationsymbols [128] and clicks on a closed displayed annotation symbol [129].In response, the web browser extension content script [103] displays theannotation symbol in open form [130]. Next, user [59] views web pagewith selected displayed annotation symbol in open form [131].

In the exemplary embodiment depicted in FIG. 31, the collection itemsweb page is shown. The collection items page context area [258] is adisplay area for the displayed items, collection items paging mechanism[259], collection items search filter [260], and collection actions menutrigger [261]. The collection actions menu [262] shows the send messageto collection option [263], invite user option [264], and change userpermissions option [265]. The collection actions menu trigger [261] isused to trigger the collection actions menu [262]. The collection itemspaging mechanism [259] can be used to change the page of displayedcollections displayed in the collection items page context area [258].The send message to collection option [263] creates a message chain witha first text message and sends it to members of the collection that havethe readable permission or greater for the collection. The message chainappears in the user's inbox. An exemplary embodiment of the user's inboxis depicted in FIG. 33. In the exemplary embodiment in FIG. 33, a USHistory collection message chain [281] is shown. A message sent tomembers of that collection using the send message to collection option[263] will appear in the inboxes of recipients categorized under thecollection to which messages were sent. All members of the collectionthat have a readable permission or greater will be able to read themessage, and all members that have the messageable permission andgreater will be able to respond. The invite user option [264] can beused to invite new users to the collection. The invitations are sent tothe invited user's inbox. The change user permissions option [265] canbe used to change the permissions of a member of that collection.Notifications, in the form of a message in a message chain, of thechange may be sent to the inbox of the user whose permissions werechanged.

Collection item filters such as the collection items search filter [260]shown in the exemplary embodiment in FIG. 31 are used to receive inputsfrom users. In the case of the collection items page context area [258]collection items search filter [260], it is a collection items searchphrase. These inputs are translated into collection item parametervalues sent to the annotation server [61], as shown in some figures.These collection item parameter values are used by the annotation server[61] to input collection item parameters into a collection item requestquery that is used by the electronic database [62], as shown in somefigures. The collection item request query includes collection itemparameter values and a collection item page number. The collection itemrequest query with collection item parameter values is used to specify aset of collection items and a sequential ordering on those collectionitems. The collection item page number specifies a specific collectionitem page. Furthermore, the collection item request query may include aspecified number of collection items that are to be sent to the webbrowser running on the client electronic device. This collection itemrequest query contains collection item parameters for collection itemfilter values such as collection item search phrase and an exclusionlist of collection items to exclude from the specified list ofcollection items and a sequential ordering on that list of collectionitems.

In the exemplary embodiment depicted in FIG. 32, the collections webpage is shown. The collections page context area [266] is a display areafor the displayed collections, collections page paging mechanism [267],collections page search filter [268], and collections page actions menutrigger [269]. The collections page actions menu [270] shows the ownedfilter option [271], adminable filter option [272], writeable filteroption [273], messageable filter option [274], readable filter option[275], and subscribed filter option [276]. The collections page actionsmenu trigger [269] is used to trigger the collections page actions menu[270]. The collections page paging mechanism [267] can be used to changethe web page of displayed collections displayed in the collections pagecontext area [266]. The owned filter option [271], adminable filteroption [272], writeable filter option [273], messageable filter option[274], readable filter option [275], and subscribed filter option [276]filter the collections based on the users permissions. The ownedpermission is the highest level permission, and the owned permission isgiven to the creator and owner of the collection. The owned permissionallows the user to give other users admin permissions on that collectionand do anything the lower level permissions allow. The admin permissionis lower than the owned permission and allows users to raise thepermissions of non-admins and handle other administrative tasks as wellas do anything the lower level permissions allow. The writeablepermission is lower than the admin permission and allows users to additems to a collection and do anything the lower level permissions allow.The messageable permission is lower than the writeable permission andallows the user to send messages to other members of the collection anddo anything the readable permission allows. The readable permission islower than the messageable permission and allows the user to view allitems in the collection and read all collection messages for thatcollection. The subscribed permission gives a user the readablepermissions on a public collection. The subscribed permission istypically granted without admin intervention to a user that requests thepermission since the collection and associated messages are public. Toallow users to visualize privacy settings, background colors areassigned based on colors. Colors associated with a shorter wavelengthimply greater permissions, and colors with a longer wavelength implylesser permissions. In other words, colors of a rainbow are associatedto permissions. Purple corresponds to owned collections. Bluecorresponds to adminable collections. Green corresponds to writeablecollections. Yellow corresponds to messageable collections. Orangecorresponds to readable collections. And, red corresponds to subscribedcollections. For the purpose of design, pastel variants of these colorsmay be used. Or, another set of backgrounds signifying a spectrum ofvalues can be used. These backgrounds apply to the displayed collectionsin the exemplary embodiment in FIG. 32. For the exemplary embodiment inFIG. 31, the background of the web page is changed to correspond to thecolor associated with the permissions of that collection.

In an exemplary embodiment, to facilitate going through a large numberof items including annotations that are in a single collection,annotations can be grouped into stacked sets of displayed annotationitems. Such stacked sets of displayed annotation items appear as asingle item, with the visual appearance of items that are stacked. It isbeneficial to place annotations from the same URL, up to 9 annotationsor another fixed configurable value, displayed annotation items, in astacked set of displayed annotation items. In order to facilitate such adisplay, the paging mechanism should support the return of items in thisformat. As an illustration, imagine that 8 out of the 10 items areannotation items that belong to the same URL. Once these 8 items aregrouped into a stacked set of displayed annotation items, there are 3items in the collection items page. In order to ensure that 10 items arepresent even when stacked sets of displayed annotation items are used,more items need to be returned by the annotation server [61]. In theexemplary embodiment, a relational database [246] is used, and a complexstructured query language (SQL) query using windowing functions may berequired. Typically, object-relational mapping (ORM) systems are used bymost modern web frameworks to access the relational database [246]. Inthe exemplary embodiment, the ORM system did not handle windowingfunctions. To overcome this limitation, an underlying relational algebralibrary that is used by the ORM system was used. Using this relationalalgebra, a complex SQL query using the appropriate windowing functionswas generated. This allows the display of collection items pages withstacked sets of displayed annotation items.

Collection filters such as the collections page search filter [268]shown in the exemplary embodiment in FIG. 32 are used to receive inputsfrom users. In the case of the collections page context area [266]collections page search filter [268], it is a collections search phrase.These inputs are translated into collection parameter values sent to theannotation server [61], as shown in some of the figures. Thesecollection parameter values are used by the annotation server [61] toinput collection parameters into a collection request query that is usedby the electronic database [62], as shown in some of the figures. Thecollection request query includes collection parameter values and acollection page number. The collection request query with collectionparameter values is used to specify a set of collections and asequential ordering on those collections. The collection page numberspecifies a specific collection page. Furthermore, the collectionrequest query may include a specified number of collections that are tobe sent to the web browser running on the client electronic device. Thiscollection request query contains collection parameters for collectionfilter values such as collection search phrase and an exclusion list ofcollections to exclude from the specified list of collections and asequential ordering on that list of collections.

In the exemplary embodiment depicted in FIG. 33, the inbox page isshown. The collection message chains section and title [277] includesthe US History collection message chains section and title [279] and carcollection message chains section and title [280]. Collection messagechains are message chains associated with a collection. These collectionmessage chains occur in the “Collection Messages” section under the nameof the collection to which the collection message chain belongs. In thisexemplary embodiment, the US History collection message chains sectionand title [279] lists US History collection message chain [281], and thecar collection message chains section and title [280] lists carcollection message chain one [282] and car collection message chain two[283]. Untagged message chains are those message chains that are notassociated to any collection. Untagged message chains appear in the“Untagged Messages” section. In the exemplary embodiment, the untaggedmessage chains section and title [278] includes untagged message chainone [284], untagged message chain two [285], and untagged message chainthree [286]. When a user clicks on a message chain, the message chainappears in the message chain context area [287]. In the message chaincontext area [287], the US History message chain's first system message[288] is shown with the system message accept button [289] and thesystem message reject button [290]. The user can press system messageaccept button [289] to accept the invitation to join the collection, orthe user can press system message reject button [290] to reject theinvitation to join the collection.

In the exemplary embodiment depicted in FIG. 34, the inbox page is shownafter the user accepts the invitation to join the collection. The systemmessage notification [291] shows that the user accepted the invitationto join the collection. The message chain message divider [292]separates the messages of one user from the messages of another user. Itshould also be clear to those persons having ordinary skill in the artthat the message chain message divider [292] can be implemented using avariety of visual design techniques to separate the messages of one userfrom the messages of another user in this context. Next, US Historymessage chain's first text message [293], US History message chain'ssecond text message [294], and US History message chain's third textmessage [295] are shown. And, message composition section and title[296] is shown along with the message composition box [297] and messagesend button [298]. This inbox has a permission management system andconnection to collections. When a user is granted permission to amessage chain, all other messages in the message chain are visible evenif the user didn't originally have access when the message chain wascreated. This facilitates discussion, and access is controlled at thelevel of a message chain. Furthermore, system message chains typicallyensure that admins of the collection are informed about the activitiesand permissions of members of the group. In addition, users withmessageable permissions can send a message chain with a single messageto users in a collection or to a select group of people within thecollection. Being able to create a collection chain helps clarify thesubject of the discussion and direct user's attention to collections ortasks that the user wants to focus on doing.

The inbox is an effective means of inviting users to collections if theuser is already on the site. The inbox is also effective for sharingitems with others if the user is already on the site. To facilitate itemand collection sharing when a user is not on the site, links withcryptographic hashes are used. These links cannot be guessed, and a userthat has the link does not need to create an account in order to accessthe link. Simply possessing the link is sufficient for sharing. Inaddition, public items including annotations and collections can beshared through social media sites.

In FIG. 21, a flowchart is shown of a nurse using an exemplaryembodiment of the annotation capable web browser [24], as shown in someof the figures, with notepad functionality. The nurse wants to teach apatient that rice is not good for diabetics and then show the patientthat a favorite dish can be modified to make it more friendly fordiabetics. Once this notepad is created, it can be shared with patients.The nurse on day one [132] visits glycemic index Wikipedia page andhighlights “American Diabetes Association supports” and creates checkannotation along with annotation comment stating, “Most doctors stronglybelieve that high glycemic index foods have a negative impact on thehealth of diabetics.” [134] and adds annotation to notepad [135]. Next,the nurse visits allrecipes.com and finds a dish such as “FlavorfulSpanish Rice and Beans” and highlights “1 cup uncooked white rice” andcreates exclamatory annotation along with annotation comment stating,“The glycemic index of rice is very high, but it's possible to make thissame recipe with pearled barley.” [136] and adds annotation to notepad[137]. Afterwards, the nurse visits Harvard Health website and findspage for glycemic index of 100+ foods and highlights “White riceboiled*” with exclamatory annotation and states, “Most people don'trealize that white rice has such a high glycemic index. Notice that itis 73, which is higher than most foods.” [138] and adds annotation tonotepad [139]. Next, the nurse visits Harvard Health website and findspage for glycemic index of 100+ foods and highlights “Pearled Barley”with dagger annotation and states, “Most people don't realize thatpearled barley has such a low glycemic index. Notice that it is 28,which is lower than most foods.” [140] and adds annotation to notepad[141]. Afterwards, the nurse visits Target website and finds productpage for pearled barley and selects “Pearled Barley—1 lb—Market Pantry”with dagger annotation and states, “Pearled Barley can be made in a ricecooker just like rice. Furthermore, cooked pearled barley has a grainlike appearance and feel that makes it a perfect replacement for rice.This can be substituted for rice in recipes that call for rice.”; can besubstituted for rice in recipes that call for rice.” [142] and addsannotation to notepad [143]. After the notepad is created, the nurse onday two [133] shares notepad with a patient that is diabetic and likesto make Spanish Rice [144].

In FIG. 22, a flowchart is shown of a patient using an exemplaryembodiment of the annotation capable web browser [24] with notepadfunctionality to view a notepad created by a nurse. The patient on daytwo [145] opens notepad link and clicks first displayed annotationscreenshot bundle embedded in notepad [147] and reads Glycemic IndexWikipedia title and reads highlighted text “American DiabetesAssociation supports” after observing checkmark displayed annotationsymbol and then reads the annotation comment, “Most doctors stronglybelieve that high glycemic index foods have a negative impact on thehealth of diabetics.” [148]. Next, the patient clicks second displayedannotation screenshot bundle embedded in notepad [149] and readsallrecipes.com title “Flavorful Spanish Rice and Beans” and then readsthe highlighted text “1 cup uncooked white rice” after seeing theexclamatory displayed annotation symbol and then reads the annotationcomment, “The glycemic index of rice is very high, but it's possible tomake this same recipe with pearled barley.” [150]. Afterwards, thepatient clicks third displayed annotation screenshot bundle embedded innotepad [151] and reads Harvard Health website title “Glycemic Index of100+ Foods” and then reads highlighted text “White rice boiled*” afterseeing the exclamatory displayed annotation symbol and then reads theannotation comment, “Most people don't realize that white rice has sucha high glycemic index. Notice that it is 73, which is higher than mostfoods.” [152]. Next, the patient clicks fourth displayed annotationscreenshot bundle embedded in notepad [153] and reads Harvard Healthwebsite title “Glycemic Index of 100+ Foods” and then reads highlightedtext after seeing the dagger displayed annotation symbol and then reads“Pearled Barley” and then reads the annotation comment, “Most peopledon't realize that pearled barley has such a low glycemic index. Noticethat it is 28, which is lower than most foods.” [154]. Afterwards, thepatient clicks fifth displayed annotation screenshot bundle embedded innotepad [155] and reads Target website title and notices it is a productpage for pearled barley and reads highlighted text “Pearled Barley—1lb—Market Pantry” after seeing the dagger displayed annotation symboland then reads annotation comment stating, “Pearled Barley can be madein a rice cooker just like rice. Furthermore, cooked pearled barley hasa grain like appearance and feel that make it a perfect replacement forrice. This can be substituted for rice in recipes that call for rice.”[156]. After understanding the contents of the notepad, the patient ongrocery shopping day [146] goes to Target and buys Pearled Barley andmakes “Flavorful Spanish Barley and Beans” [157].

In the exemplary embodiment depicted in FIG. 23, an annotation capableweb browser [24] with the notepad feature is presented. The annotationcapable web browser with notepad feature tracks whether or not an activenotepad is present, and it allows the user to choose the active notepadfrom a group of notepads accessible to the user. FIG. 23 depicts anactive notepad [159] and a notepad embedded annotation [160]. When theactive notepad [159] is present, the annotation capable web browser withnotepad feature is in the state of active notepad present, and when anactive notepad [159] is not present the annotation capable web browserwith notepad feature is in the state of active notepad not present.Displayed notepads include many notepad embedded annotation [160]. Anotepad embedded annotation [160] is a container that includes adisplayed annotation bundle showing the data contained in an annotationdisplay bundle. In the exemplary embodiment, the notepad embeddedannotation [160] includes a displayed annotation screenshot bundle thatalso includes an annotation symbol. In an alternative embodiment, anotepad embedded annotation [160] can include the displayed screenshotbundle without the annotation symbol or annotation comment. A user canadd an annotation to a notepad by clicking the add to notepad icon [158]button depicted in FIG. 23. A notepad includes a list of references toannotation objects. The electronic database [62], as shown in some ofthe figures, stores notepad objects along with the list of references toannotation objects. The annotation server [61], as shown in some of thefigures, retrieves the notepad object and annotation objects fromelectronic database [62] and sends the notepad to the annotation capableweb browser [24] when it receives a request from the annotation capableweb browser [24]. Once an active notepad [159] is shown as a displayednotepad; a user can navigate to an annotation simply by clicking on anotepad embedded annotation [160] as depicted in notepad embeddedannotation [160] in FIG. 23. In a class of exemplary embodiments, eachnotepad is associated with a bundles display set. In an exemplaryembodiment, each notepad could be associated with a screenshot bundlesdisplay set. In another exemplary embodiment, each notepad could beassociated with an annotation screenshot bundles display set.

Notepads include a wealth of information through links to other sourcesalong with annotation comments. This information can potentially beaugmented by descriptions written by the notepad creator. Using thesenotepads, presentations can be created in a variety of formats includingPDF, Microsoft Word, and a variety of other open source and proprietarydocument formats. These presentations are created by sequentiallyincluding for each annotation, the associated screenshot with markedtext [37], separate context annotation highlighted text [38], separatecontext question displayed annotation symbol [39], and the separatecontext annotation comment [40] as shown in FIG. 9. In addition, thisinformation can be augmented with text summaries of the linked articlesgenerated using natural language processing techniques along with imagecaptioning techniques. Furthermore, the user can create a writtendescription to add at specified points, and these written descriptionswill be in the presentation output.

In the exemplary embodiment depicted in FIG. 24, a sequence diagramshows, in the exemplary embodiment, interactions between the user [59],annotation capable web browser with notepad feature [161], server forURL [60], annotation server [61], electronic database [62], and contentdelivery network [63] for the purpose of creating a notepad. First, theuser [59] visits URL [162] in annotation capable web browser withnotepad feature [161], which requests web document [163] from server forURL [60], which returns web document [164] to annotation capable webbrowser with notepad feature [161], which shows web document [165] touser [59]. Next, the user [59] enters input to create “Flavorful SpanishBarley and Beans” notepad [166] in annotation capable web browser withnotepad feature [161], which sends request to create “Flavorful SpanishBarley and Beans” notepad [167] to annotation server [61], which sendsinstruction to create notepad object [168] to the electronic database[62]. Then, the electronic database [62] acknowledges creation ofnotepad object [169] to annotation server [61], which acknowledgescreation of notepad [170] to annotation capable web browser with notepadfeature [161], which shows displayed notepad [171] to user [59]. Next,the user [59] enters input to create glycemic index annotation [172],which sends annotation screenshot bundle [173] to the annotation server[61], which sends images for storage if required [174] to the contentdelivery network [63]. The content delivery network [63] returns URLsfor stored images [175] to annotation server [61], which sendsinstruction to create glycemic index annotation object with CDN URLs[176] to the electronic database [62]. Next, the electronic database[62] acknowledges annotation object creation [177] to annotation server[61], which acknowledges annotation screenshot bundle received and sendsannotation screenshot display bundle [178] to annotation capable webbrowser with notepad feature [161], which shows displayed annotationscreenshot bundle [179] to user [59]. Next, the user [59] adds glycemicindex annotation to notepad [180] in annotation capable web browser withnotepad feature [161], which requests glycemic index annotation objectreference be added to notepad [181] by the annotation server [61], whichsends instructions to add glycemic index annotation object reference tonotepad object [182] to the electronic database [62]. Then, theelectronic database [62] acknowledges annotation object referenceaddition [183] to the annotation server [61], which acknowledgesglycemic index annotation object reference addition to notepad [184] tothe annotation capable web browser with notepad feature [161], whichshows web document with notepad at side with displayed annotationscreenshot bundle added [185] to the user [59].

In the exemplary embodiment depicted in FIG. 25, a sequence diagramshows, in the exemplary embodiment, interactions between the user [59],annotation capable web browser with notepad feature [161], server forURL [60], annotation server [61], electronic database [62], and contentdelivery network [63] for the purpose of viewing a notepad. First, theuser [59] visits any URL [186] in annotation capable web browser withnotepad feature [161], which requests “Flavorful Spanish Barley andBeans” notepad [187] from the annotation server [61], which requestsnotepad object [188] from the electronic database [62]. Then, theelectronic database [62] returns notepad object [189] to the annotationserver [61], which returns notepad [190] to the annotation capable webbrowser with notepad feature [161]. Next, the annotation capable webbrowser with notepad feature [161] requests glycemic index annotationscreenshot display bundle with annotation symbol data [191] from theannotation server [61], which requests glycemic index annotation object[192] from the electronic database [62], which returns annotation objectwith CDN URLs [193] to the annotation server [61], which returnsannotation screenshot display bundle with CDN URLs and annotation symboldata [194] to the annotation capable web browser with notepad feature[161]. Next, the annotation capable web browser with notepad feature[161] requests images from CDN using CDN URLs [195] from the contentdelivery network [63], which returns images from CDN for the specifiedURLs [196] back to the annotation capable web browser with notepadfeature [161], which shows displayed notepad [197] to the user [59].Next, the user [59] clicks first displayed annotation screenshot bundle[198] in the annotation capable web browser with notepad feature [161],which requests web document [199] from the server for URL [60], whichreturns web document [200] back to the annotation capable web browserwith notepad feature [161], which shows displayed annotation symbol inopen state on web document [201]. Then, the annotation capable webbrowser with notepad feature [161] shows web document, with notepad atside with displayed annotation symbol in open state and browser scrolledto appropriate location [202], to the user [59].

In the exemplary embodiment depicted in FIG. 26, a flowchart of notepadcreation is presented showing the steps carried out by the instructionset of the web browser extension that in the exemplary embodimenttransforms a web browser, supporting the addition of browser extensions,into an annotation capable web browser with the notepad feature. Theuser [59] opens browser [203], and then the web browser [102] loadsbrowser extension [204]. Next, the user [59] visits URL [205].Afterwards, the web browser [102] loads data sent from visited URL [206]and injects content script [207]. Afterwards, the user [59] views webpage [208] and creates notepad [209]. As a result, the web browserextension content script [103] creates notepad [210], and then webbrowser extension background script [104] sends request to annotationserver to create notepad [211]. Next, the web browser extension contentscript [103] shows displayed notepad [212], and the user [59] viewsdisplayed notepad and adds already created annotation to notepad [213].Afterwards, the web browser extension content script [103] adds alreadycreated annotation to notepad [214], and the web browser extensionbackground script [104] sends request to add annotation object referenceto notepad to annotation server [215].

In the exemplary embodiment depicted in FIG. 27, a flowchart of notepadviewing is presented showing the steps carried out by the instructionset of the web browser extension that in the exemplary embodimenttransforms a web browser, supporting the addition of browser extensions,into an annotation capable web browser with the notepad feature. Theuser [59] opens browser [216], and the web browser [102] loads browserextension [217]. Afterwards, the user [59] visits any URL [218]. Next,the web browser [102] loads data sent from visited URL [219] and injectscontent script [220]. Afterwards, the user [59] opens notepad [221], andthe web browser extension content script [103] requests notepad [222].Next, the web browser extension background script [104] requests fromannotation server notepad with annotation screenshot dis-play bundlesand annotation symbol data for all corresponding annotation objects inthe notepads list of references to annotation objects [223], and the webbrowser extension content script [103] shows displayed notepad [224].Afterwards, the user [59] views displayed notepad and clicks firstdisplayed annotation screenshot bundle [225], and the web browserextension content script [103] sends message to browser to visit URL[226]. Then, the web browser [102] visits URL [227] and loads data sentfrom URL [228]. Next, the web browser extension background script [104]requests additional annotation object information from annotation serversuch as annotation comment replies [229] and gets additional annotationobject information from annotation server [230]. Next, the web browserextension content script [103] shows displayed annotation symbol in openstate [231] and scrolls to location of displayed annotation symbol[232]. Afterwards, the user [59] views page scrolled to location ofdisplayed annotation symbol in the open state [233].

In the exemplary embodiment depicted in FIG. 28, a system diagram ispresented showing how first user [234], second user [235], third user[236], first user's browser [237], second user's browser [238], thirduser's browser [239], annotation server [61], content delivery network[63], and electronic database [62] interact. Users communicate with theannotation server [61], which pushes images to the content deliverynetwork [63]. Users also communicate with the content delivery network[63] to get images and other files. Users do not directly communicatewith the electronic database [62]. In this exemplary embodiment, theannotation server [61] is placed on one computer system, and theelectronic database [62] is placed on a second computer system. Placingthe electronic database [62] on the same machine as the annotationserver [61] will reduce the number of machines used. A question thatshould be addressed is the number of simultaneous users of the system.Once this question is addressed, the system can potentially be sized.The content delivery network [63] in this exemplary embodiment isoperated by a third party. A content delivery network (CDN) may beoffered by a third party. Many third parties offer CDNs. These CDNs canbe configured with a web interface, and files can be uploaded andaccessed via an application programming interface (API). This API may bea representational state transfer (REST) API. Configuring and using sucha third party CDN based on that third party's documentation should beclear to those of ordinary skilled in the art.

In the exemplary embodiment depicted in FIG. 29, a component diagram ispresented showing how a more robust system can be built that allowsdifferent components to be isolated. Separating concerns can beadvantageous to improving security and facilitating reproduciblesoftware deployment to a network of machines. The added security,separation of concerns, and reproducible deployments can facilitatescaling the system to handle a large number of users. FIG. 29 shows asimple version of the annotation server [61] and the electronic database[62] communicating next to an alternative exemplary embodiment thatshows an annotation server [61] including a load balancer [241],frontend web server [242], annotation API server [243], deep learningAPI [244], and message broker [245]. Also shown is the electronicdatabase [62] including a relational database [246] and a key-valuestore database [247]. In this exemplary embodiment, the load balancer[241], frontend web server [242], annotation API server [243], deeplearning API [244], message broker [245], relational database [246], andkey-value store database [247] are each running on a separate machinewith one or more central processing units (CPUs), memory, andnon-transitory computer readable storage medium. Furthermore, the deeplearning API [244] has at least one of a graphical processing unit(GPU), tensor processing unit (TPU), or field-programmable gate array(FPGA). In the exemplary embodiment depicted in FIG. 29, the loadbalancer [241] machine has one central processing unit (CPU) with 4cores, 8 GB of random-access memory (RAM), and a 250 GB solid-statedrive (SSD), and the frontend web server [242] machine has one CPU with4 cores, 8 GB of RAM, and a 250 GB SSD. The annotation API server [243]machine has two CPUs with 32 cores in each CPU for a total of 64 cores,64 GB of RAM, and a 2 TB SSD. The deep learning API [244] machine hasone CPU with 32 cores, 128 GB of RAM, two GPUs with 11 GB of RAM each,and a 2 TB SSD. The message broker [245] machine has one CPU with 4cores, 32 GB of RAM, and a 1 TB SSD. The relational database [246]machine has one CPU with 32 cores, 128 GB of RAM, and a 2 TB SSD, andthe key-value store database [247] machine one CPU with 4 cores, 128 GBof RAM, and a 1 TB SSD. Machines meeting these hardware specificationswould allow this system to support many users with multiple simultaneoususers.

In the exemplary embodiment depicted in FIG. 29, hardware specificationswere described. The rationale for these specifications will now bediscussed. The load balancer [241] simply routes requests to theappropriate location. As a result, this machine's non-transitorycomputer readable storage space requirements should be satisfied by a250 GB SSD. In comparison to computation performed by the rest of thesystem, the load balancer [241] has lower computational load and lowermemory load. As a result, 2 GB per core is sufficient, and 4 cores aresufficient given the rest of the system. As the system scales, CPU coresexecuting more instructions per second and more CPU cores may help keepthe load balancer [241] from being a bottleneck. However, the loadbalancer [241] is unlikely to be a bottleneck given the specificationsthat were given for the exemplary embodiment depicted in FIG. 29. Thefrontend web server [242] also does not require much non-transitorycomputer readable storage space, many CPU cores, or much memory. Thismachine does not store user data, and the frontend code it stores can besupported by the allotted storage space. Furthermore, the CPU cores ofthe frontend web server [242] machine simply transmit requestedresources to the user, and the user does not request the frontend codeas often as the user's browser makes API calls to the annotation APIserver [243] during typical usage. As a result, CPU cores for thefrontend web server [242] machine have lower computational load andmemory requirements than the annotation API server [243] machine. Theannotation API server [243] machine has a greater computational loadsince API requests are made by the web browsers of users during thecreation, organization, and viewing of annotations. The annotation APIserver [243] machine's total compute capacity may become a bottleneckwith a large number of simultaneous users. In the exemplary embodiment,this machine has 64 CPU cores and 64 GB of RAM. If the annotation APIserver [243] code is written in a thread safe manner, 1 GB of RAM perCPU core is sufficient. If the code is not thread-safe or the webframework is memory intensive, it may be advisable to use 2 GB of RAMper CPU core for the annotation API server [243]. To scale theannotation API server [243] to support more users, it will be morecost-effective if more machines are added than to provision each machinewith more CPU cores and more RAM. The size of the hard disk for theannotation API server [243] is mainly to allow for the storage of logfiles. The deep learning API [244] may benefit from 2 GPUs with enoughGPU RAM to run deep learning models. The CPU cores and RAM handle CPUintensive data processing steps and to get data into memory for the GPUsto consume. The 2 TB SSD can store large deep learning models and otherdata for these models. The message broker [245] should operate wheneverthe system is operational, but it will not face a lack of computationalcapability. The 32 GB of RAM is present to ensure enough RAM isavailable for storing large messages that may contain images. Sincethese images are not stored for long periods of time, 32 GB of RAM issufficient. Furthermore, 4 cores are sufficient for the message broker[245]. The message broker [245] has lower computational processingrequirements in terms of instructions per second than the annotation APIserver [243] in this exemplary embodiment. The key-value store database[247] uses one core in this exemplary embodiment. However, the key-valuestore database [247] uses RAM to store in memory reputations of variousitem objects such as annotation objects and user reputation votes forthese item objects. Furthermore, disk space is used for logging and fortemporarily storing backups of the key-value store database in memory.The relational database [246] has 128 GB of RAM to ensure all the datain the database can be stored in RAM during operation, has a 2 TB SSD toensure sufficient storage space is available for logging, and it has 32cores to provide the computation capability to handle queries sent bythe annotation API server [243].

In order to scale the system depicted in the exemplary embodiment inFIG. 29, the following steps can be taken. The new, exemplary embodimentwill have one or more load balancer [241], one or more frontend webserver [242], one or more annotation API server [243], and one or moredeep learning API [244]. Load balancers, frontend web servers,annotation API servers, and deep learning API servers can be added toimprove performance of the overall system. Often, message brokers can beorganized into a message broker cluster. A message broker cluster can beused to scale the new, exemplary embodiment. Most key-value storedatabase [247] software also has the ability to create key-value storedatabase clusters.

To ensure the relational database [246] can handle the most users in thenew, exemplary embodiment, using a relational database [246] that usesthreads as opposed to processes is ideal. In some cases, threads takeabout 256 KB of memory per thread, whereas processes take 10 MB ofmemory per process. This allows relational databases whose connectionsrely on threads to have more than 20 times more open connections thanrelational databases whose connections rely on processes. Even with theuse of connection pooling tools used by relational databases that relyon processes for open connections, thread based connections are betterfor the style of connections made by the annotation API server [243].The annotation API server [243] relies on transactions and hasperformance needs. As a result, using SQL transaction pooling as opposedto SQL session pooling or SQL statement pooling is ideal. SQL sessionpooling suffers from poor performance, and SQL statement pooling makestransactions more difficult to implement than using SQL transactionpooling. When using SQL transaction pooling, thread based connectionslead to the best performance when computer instructions need to executeon a processor not being used by the relational database [246] since aconnection remains open while work is being done on an externalprocessor. As a result, the relational database [246] may be given fewerSQL statements to execute than the relational database [246] can handle.This results in an overall lower throughput.

To further enhance the ability of the relational database [246],read-scaling the relational database [246] by creating read-replicas isadvantageous. The system can be scaled further by reducing thewrite-load on the relational database [246]. The write load can bereduced by implementing reputation voting through the key-value storedatabase [247] in the new, exemplary embodiment. To further scale thecapacity of the relational database, the number of CPU cores and RAM ofthe relational database [246] machine, in the new, exemplary embodiment,can be increased. Another step that can be taken is to use an in-memoryrelational database [246] that implements SQL without the fulldurability guarantees of most relational databases. Such systems can usean in-memory database with check-point saving and write-ahead logging tonot lose, in the event of a power loss, database data except thedatabase data that arrived at the in-memory database within the last fewseconds. Beyond these steps, the relational database can be furtherscaled by using a high performance computing (HPC) cluster with remotedirect memory access (RDMA) through Infiniband networking to allow therelational database to use memory beyond what is available locally inone machine. Since this HPC cluster can be scaled to hundreds orthousands of machines, the corresponding relational database [246] couldsupport a large number of simultaneous users.

In the exemplary embodiment depicted in FIG. 30, different types ofclient electronic devices [248] that can communicate with the annotationserver [61] and the content delivery network [63] are shown. The devicesshown are a laptop [249], desktop [250], iPad [251], Android tablet[252], iPhone [253], Android Phone [254], Apple TV via AirWeb [255],Android TV [256], and Raspberry Pi [257]. laptop [249], desktop [250],Android tablet [252], Android Phone [254], and Raspberry Pi [257]support an annotation capable web browser with notepad feature throughthe installation of a web browser and a web browser extension. TheYandex browser provides a web browser supporting web extensions onAndroid devices such as the Android tablet [252] and Android Phone[254]. iPad [251] and iPhone [253] support an annotation capable webbrowser through the installation of the Safari web browser and an appextension. Apple TV via AirWeb [255] and Android TV [256] may notcurrently be suitable for the installation of an annotation capable webbrowser including a web browser and a web browser extension.Furthermore, the form factor may not be ideal for the creation ofannotations. However, it is possible to create progressive webapplications for these devices that communicate with an annotationserver. That would allow the display of annotated material much like adigital photo frame displays pictures. That would allow these devices todisplay the wealth of annotations created using other devices shown inFIG. 30.

Annotations of pictures, videos, and sound recordings will now bediscussed. GUI diagrams in exemplary embodiments will be presentedshowing the end result of what systems display and of non-transitorycomputer readable medium instructions run in a web browser running on aprocessor. In the exemplary embodiments, the non-transitory computerreadable medium instructions may be for web browsers running on aprocessor, or the non-transitory computer readable medium instructionsmay be incorporated into an annotation capable web browser. Aspreviously discussed, an annotation capable web browser in an exemplaryembodiment is a web browser with a web browser extension. When using anannotation capable web browser, pictures, videos, and sound recordingsembedded within any web page can be annotated. The web site beingannotated does not need to contain computer readable medium instructionsto annotate embedded pictures, videos, and sound recordings. When usingan ordinary web browser, pictures, videos, and sound recordings can beannotated if the non-transitory computer readable medium instructionsare delivered via a particular web site, and the annotation of contentoccurs on that particular website.

In addition to annotation capable web browsers annotating documents andmedia on the world wide web, software applications for mobile devicesand internet televisions can also use non-transitory computer readablemedium instructions implementing the methods, techniques, and interfacesdescribed herein in order to annotate pictures, videos, and soundrecordings available to a group of users on the Internet or localintranet.

After discussing the GUI, bundles of data created for transmitting databetween components will be discussed. Once the relevant bundles of dataare discussed, methods and system architecture will be discussed in thecontext of the system architecture and components that were alreadydiscussed.

In the exemplary embodiment depicted in FIG. 35, a picture [299] isshown with the picture annotation subject [300], picture annotationsubject bounding box [301], picture annotation arrow [302], and pictureannotation comment in box [303]. The picture annotation subject [300] isan entity of interest in the picture. The picture annotation subject[300] could be a person, car, soccer ball, tennis ball, or other objectthat is identifiable within a picture by a human or computer system. Thepicture annotation subject bounding box [301] is a bounding box drawnaround the picture annotation subject [300] by a user or computersystem. The picture annotation comment in box [303] is created by theuser, and the annotation comment should relate to the picture annotationsubject [300]. The picture annotation arrow [302] is a line that mayhave arrowheads on either side that connects the picture annotationsubject bounding box [301] and the picture annotation comment in box[303]. The picture annotation subject bounding box [301], pictureannotation arrow [302], and picture annotation comment in box [303] werecreated by a user and are the objects included in a picture annotation.The user can select a rectangle tool from a panel somewhere on the webpage or floating toolbar and draw a picture annotation subject boundingbox [301]. Furthermore, the user can enter text and position the pictureannotation comment in box [303]. The picture annotation subject boundingbox [301] and picture annotation comment in box [303] are connected by apicture annotation arrow [302]. The objects of the picture annotationmay not all be visible at the same time. As an example, it is possiblefor only the picture annotation subject bounding box [301] to bevisible, with the other objects of the picture annotation becomingvisible after a user mouses over the picture annotation subject [300] orthe picture annotation subject bounding box [301]. The visible elementsof the picture annotation are those elements that are visible withouthaving to mouseover some other element. The mouseover elements of thepicture annotation are those elements that become visible when the usermouses over the visible elements of the picture annotation.

Below the picture [299] is a control panel including the pictureprevious annotation arrow button [304], picture next annotation arrowbutton [305], picture include collisions button [306], picture add tocandidate annotation group button [307], picture candidate annotationgroup list box [308], and picture create annotation group button [309].The label of the picture add to candidate annotation group button [307]has the shorter name “Add To Annotation Group”. However, a pictureannotation is first added to the picture candidate annotation group,which later becomes the picture annotation group after the user clickspicture create annotation group button [309]. Picture annotationsinclude objects such as picture annotation subject bounding box [301],picture annotation arrow [302], and picture annotation comment in box[303]. A picture annotation may contain more than one picture annotationsubject [300]. In the electronic database [62], picture annotations arestored as picture annotation objects. These picture annotation objectsare then assigned a sequential ordering by the electronic database [62],which gives a sequential ordering to picture annotations. This orderingon picture annotations gives meaning to the concept of previous and nextpicture annotation. The picture previous annotation arrow button [304]removes the objects included in the current picture annotation, assumingthe current picture annotation is not a candidate picture annotation,from the displayed view and then adds the objects in the previouspicture annotation to the displayed view. The picture next annotationarrow button [305] removes the objects included in the current pictureannotation, assuming the current picture annotation is not a candidatepicture annotation, from the displayed view and then adds the objects inthe next picture annotation to the displayed view. A picture annotationgroup includes multiple picture annotations. Before the pictureannotation group is created, the picture annotations need to beselected. During the selection process, the picture annotations arecandidate picture annotations. The candidate picture annotations arelisted in the picture candidate annotation group list box [308]. FIG. 35depicts a scenario in which picture annotations have not yet been addedto the picture candidate annotation group list box [308]. Thus, themessage in the picture candidate annotation group list box [308] is thepicture candidate annotation group list empty message [310].

The picture include collisions button [306] determines the displayproperties of picture annotations colliding with the candidate pictureannotations listed in the picture candidate annotation group list box[308]. The possible states include exclude collisions and includecollisions. If the picture include collisions button [306] is clicked,picture annotations colliding with the candidate picture annotationslisted in the picture candidate annotation group list box [308] will beshown. In the exemplary embodiment depicted in FIG. 35, the button'slabel will change to “Exclude Collisions”. If this button is clicked onemore time, picture annotations colliding with the candidate pictureannotations listed in the picture candidate annotation group list box[308] will not be shown. If the picture create annotation group button[309] is clicked, an item will be created that displays a pictureannotation group including all the picture annotations listed in thepicture candidate annotation group list box [308] at the time thepicture create annotation group button [309] was clicked.

In alternative embodiments, the picture annotation subject bounding box[301] and picture annotation arrow [302] may not be displayed. In analternative embodiment, just the picture annotation subject bounding box[301] and picture annotation comment in box [303] are present. Or, inanother alternative embodiment, just the picture annotation comment inbox [303] is present near the picture annotation subject [300].

In the exemplary embodiment depicted in FIG. 36, a picture [299] isshown with the first picture candidate annotation group list item [311]added to the picture candidate annotation group list box [308]. Thisstate is produced by clicking the picture add to candidate annotationgroup button [307] in the state of the exemplary embodiment depicted inFIG. 35. After the picture annotation has been added to the candidatepicture annotation group list, the state of the exemplary embodimentdepicted in FIG. 37 is produced by clicking the picture next annotationarrow button [305] in the state of the exemplary embodiment depicted inFIG. 36.

In the exemplary embodiment depicted in FIG. 37, a second pictureannotation subject [312] is shown along with the user created secondpicture annotation subject bounding box [313], second picture annotationarrow [314], and second picture annotation comment in box [315]. If thepicture add to candidate annotation group button [307] is clicked in thestate of the exemplary embodiment shown in FIG. 37, the state of theexemplary embodiment shown in FIG. 38 is produced.

In the exemplary embodiment depicted in FIG. 38, a second picturecandidate annotation group list item [316] is shown. If the picturecreate annotation group button [309] is pressed, an annotation groupincluding the two annotations depicted in the picture candidateannotation group list box [308] in FIG. 38 would be created.

In the exemplary embodiment depicted in FIG. 39, the user has previouslyclicked the picture include collisions button [306] in FIG. 36 allowingcolliding picture annotations to be shown. After pressing the picturenext annotation arrow button [305] from the state depicted in FIG. 36,the state depicted in FIG. 39 could result. In FIG. 39, a collidingpicture annotation arrow [317] and colliding picture annotation commentin box [318] are shown.

In the exemplary embodiment depicted in FIG. 40, a video [319] is shownwith the video annotation playback [320]. The video [319] shows thevideo annotation subject [321], video annotation subject bounding box[322], video annotation arrow [323], and video annotation comment in box[324]. The video annotation subject [321] is an entity of interest inthe video. The video annotation subject [321] could be a person, car,soccer ball, tennis ball, or other object that is identifiable within avideo by a human or computer system. The video annotation subjectbounding box [322] is a bounding box drawn around the video annotationsubject [321] by a user or computer system. The video annotation commentin box [324] is created by the user, and the annotation comment shouldrelate to the video annotation subject [321]. The video annotation arrow[323] is a line that may have arrowheads on either side that connectsthe video annotation subject bounding box [322] and the video annotationcomment in box [324]. The video annotation subject bounding box [322],video annotation arrow [323], and video annotation comment in box [324]were created by a user and are the objects included in a videoannotation. The user can select a rectangle tool from a panel some-whereon the web page or a floating toolbar and draw the initial videoannotation subject bounding box [322]. Furthermore, the user can entertext and position the video annotation comment in box [324] and connectthem with a video annotation arrow [323]. As the video [319] plays, sodoes the video annotation playback [320]. While video annotationplayback [320] plays, the user creating a video annotation can move thevideo annotation subject bounding box [322] with the mouse to ensure thevideo annotation subject bounding box [322] is properly positionedthroughout the video. The user can move the video annotation comment inbox [324] with the mouse to ensure the video annotation comment in box[324] is properly positioned throughout the video. Once the motion pathsof the video annotation subject bounding box [322] and video annotationcomment in box [324] are known, the motion path of the video annotationarrow [323] along with its rotation over time, contraction over time,dilation over time, and position over time can be calculated tocorrespond to the motion paths of the video annotation subject boundingbox [322] and video annotation comment in box [324]. The user can alsopause the video and resize the video annotation subject bounding box[322] and video annotation comment in box [324]. The objects of thevideo annotation may not all be visible at the same time. As an example,it is possible for only the video annotation subject bounding box [322]to be visible with the other objects of the video annotation becomingvisible after a user mouses over the video annotation subject [321] orthe video annotation subject bounding box [322]. The visible elements ofthe video annotation are those elements that are visible without havingto mouseover some other element. The mouseover elements of the videoannotation are those elements that become visible when the user mousesover the visible elements of the video annotation.

Below the video [319] is a control panel including the video previousannotation arrow button [325], video next annotation arrow button [326],video include collisions button [327], video add to candidate annotationgroup button [328], video candidate annotation group list box [329], andvideo create annotation group button [330]. The label of the video addto candidate annotation group button [328] has the shorter name “Add ToAnnotation Group”. However, a video annotation is first added to thevideo candidate annotation group, which later becomes the videoannotation group after the user clicks video create annotation groupbutton [330]. Video annotations include objects such as video annotationsubject bounding box [322], video annotation arrow [323], and videoannotation comment in box [324]. A video annotation may contain morethan one video annotation subject [321]. In the electronic database[62], video annotations are stored as video annotation objects. Thesevideo annotation objects are then assigned a sequential ordering by theelectronic database [62], which gives a sequential ordering to videoannotations. This ordering on video annotations gives meaning to theconcept of previous and next video annotation. The video previousannotation arrow button [325] removes from the displayed view theobjects included in the current video annotation, assuming the currentvideo annotation is not a candidate video annotation, and then adds theobjects in the previous video annotation to the displayed view. Thevideo next annotation arrow button [326] removes from the displayed viewthe objects included in the current video annotation, assuming thecurrent video annotation is not a candidate video annotation, and thenadds the objects in the next video annotation to the displayed view. Avideo annotation group includes multiple video annotations. Before thevideo annotation group is created, the video annotations need to beselected. During the selection process, the video annotations arecandidate video annotations. The candidate video annotations are listedin the video candidate annotation group list box [329]. FIG. 40 depictsa scenario in which video annotations have not yet been added to thevideo candidate annotation group list box [329]. Thus, the message inthe video candidate annotation group list box [329] is the videocandidate annotation group list empty message [331].

The video include collisions button [327] determines the displayproperties of video annotations colliding with the candidate videoannotations listed in the video candidate annotation group list box[329]. For video annotations, collision means that two video annotationscollide at some point in time. The collision may be depicted in red onthe play line of the video annotation playback [320]. If the videoinclude collisions button [327] is clicked, video annotations collidingwith the candidate video annotations listed in the video candidateannotation group list box [329] will be shown. In the exemplaryembodiment depicted in FIG. 40, the buttons label will change to“Exclude Collisions”. If this button is clicked one more time, videoannotations colliding with the candidate video annotations listed in thevideo candidate annotation group list box [329] will not be shown. Ifthe video create annotation group button [330] is clicked, an item willbe created that displays a video annotation group including all thevideo annotations listed in the video candidate annotation group listbox [329] at the time the video create annotation group button [330] wasclicked. If the video add to candidate annotation group button [328] isclicked in the state depicted in the exemplary embodiment in FIG. 40,the state depicted in the exemplary embodiment in FIG. 41 will beproduced with the first video candidate annotation group list item [335]added to the video candidate annotation group list box [329].

In alternative embodiments, the video annotation subject bounding box[322] and video annotation arrow [323] may not be displayed. In analternative embodiment, just the video annotation subject bounding box[322] and video annotation comment in box [324] are present. Or, inanother alternative embodiment, just the video annotation comment in box[324] is present near the video annotation subject [321].

In the exemplary embodiment depicted in FIG. 40, the video [319] playercontrols are separate from the video annotation playback [320]. In analternative embodiment, it is possible to integrate both controls intoone playback control. This may be a more complex input interface, but itreduces the number of elements displayed on the screen. This commentabout integrating the two playback controls also applies to theexemplary embodiments depicted in FIG. 41, FIG. 42, FIG. 43, FIG. 44,and FIG. 45.

In the exemplary embodiment depicted in FIG. 41, the video annotationsubject bounding box motion path [332], video annotation arrow motionpath [333], and video annotation comment input box motion path [334] areshown. The video annotation subject bounding box motion path [332] showsthe motion path of the video annotation subject bounding box [322],which should serve as the bounding box for the video annotation subject[321] as the video annotation subject [321] moves throughout the video.The video annotation arrow motion path [333] shows the motion path ofthe video annotation arrow [323] as the video annotation arrow [323]moves as the video [319] progresses in time. The video annotation arrow[323] translates, rotates, dilates, and contracts in time since thevideo annotation subject bounding box [322] and video annotation commentin box [324] move in time. The video annotation comment input box motionpath [334] shows the motion path of the video annotation comment in box[324] as the video annotation comment in box [324] moves as the video[319] progresses in time.

In the exemplary embodiment depicted in FIG. 42, the second videoannotation subject [336], second video annotation subject bounding box[337], second video annotation arrow [338], second video annotationcomment in box [339], second video annotation subject bounding boxmotion path [340], second video annotation arrow motion path one [341],second video annotation arrow motion path two [342], final second videoannotation subject bounding box location [343], and final second videoannotation arrow location [344] are shown. The second video annotationsubject bounding box [337] follows the second video annotation subject[336] along the second video annotation subject bounding box motion path[340] to the final second video annotation subject bounding box location[343]. The second video annotation arrow [338] transforms to the finalsecond video annotation arrow location [344] over time. Thetransformation which includes movement, rotation, and contraction isdepicted by the second video annotation arrow motion path one [341] andsecond video annotation arrow motion path two [342]. The second videoannotation comment in box [339] stays fixed in time. The second videocandidate annotation group list item [345] is shown in the videocandidate annotation group list box [329], which happens when the userclicks the video add to candidate annotation group button [328].

In the exemplary embodiment depicted in FIG. 43, the user has previouslyclicked the video include collisions button [327] in the state depictedin the exemplary embodiment of FIG. 41. As a result, video annotationswith collisions with video annotations in the candidate annotation grouplist are shown. After clicking the video next annotation arrow button[326] after clicking the video include collisions button [327] in thestate depicted in the exemplary embodiment of FIG. 41, the collidingvideo annotation arrow [346] and colliding video annotation comment inbox [347] may be shown. In the state depicted in the exemplaryembodiment in FIG. 43, a collision is depicted. However, the collisionmay occur at a point not depicted in a particular video frame. In suchcases, the collision may be depicted in red in the timeline of the videoannotation playback [320] within the exemplary embodiment.

In the exemplary embodiment depicted in FIG. 44, a sound recordingplayback [348] and sound recording annotation playback [349] are shown.Below the sound recording annotation playback [349] is shown the soundrecording annotation arrow [350], sound recording annotation comment box[351], sound recording annotation connection arrow [352], and soundrecording derived annotation comment box [353]. Below the soundrecording annotation playback [349] is a control panel including thesound recording previous annotation arrow button [354], sound recordingnext annotation arrow button [355], sound recording add to candidateannotation group button [356], sound recording create derived annotationbutton [357], sound recording candidate annotation group list box [358],sound recording create annotation group button [359], and soundrecording derived annotation comment input box [360]. The label of thesound recording add to candidate annotation group button [356] has theshorter name “Add To Annotation Group”. However, a sound recordingannotation is first added to the sound recording candidate annotationgroup, which later becomes the sound recording annotation group afterthe user clicks sound recording create annotation group button [359].

To create a sound recording annotation in the exemplary embodimentdepicted in FIG. 44, the user selects a short segment of the soundrecording annotation playback [349] using the mouse. After the selectionis made, a sound recording annotation arrow [350] and sound recordingannotation comment box [351] appear, originating from the middle of theselection allowing the user to create a sound recording annotationcomment in the sound recording annotation comment box [351]. Soundrecording annotations include objects such as the sound recordingannotation arrow [350] and sound recording annotation comment box [351].The short segment of the sound recording annotation playback [349] canbe marked as shown by embedded sound recording annotation playback range[393] in FIG. 49. While FIG. 49 shows an embedded sound recording andthe marked short segment is on the playback bar for the sound recordingplayback [348], the same style of marked segment can be used on thesound recording annotation playback [349]. The segment can also be leftunmarked, or the marked segment can appear after mousing over theselected segment, sound recording annotation arrow [350], or soundrecording annotation comment box [351]. In addition, a question soundannotation symbol can be introduced that behaves similarly to thequestion embedded sound annotation symbol [394] in FIG. 49.

A sound recording annotation may contain more than one selected segmentof sound. In the electronic database [62], sound recording annotationsare stored as sound recording annotation objects. These sound recordingannotation objects are then assigned a sequential ordering by theelectronic database [62], which gives a sequential ordering to soundrecording annotations. This ordering on sound recording annotationsgives meaning to the concept of previous and next sound recordingannotation. The sound recording previous annotation arrow button [354]removes from the displayed view the objects included in the currentsound annotation, assuming the current sound annotation is not acandidate sound annotation, and then adds the objects in the previoussound annotation to the displayed view. The sound recording nextannotation arrow button [355] removes from the displayed view theobjects included in the current sound recording annotation, assuming thecurrent sound recording annotation is not a candidate sound recordingannotation, and then adds the objects in the next sound recordingannotation to the displayed view. Sound recording annotation groups area group of sound recording annotations that the user wants to grouptogether. These groupings display as a single item, and one or moresound recording annotations from the sound recording annotation groupcan be used to create derived sound recording annotations relating theseone or more sound recording annotations. Furthermore, a derived soundrecording annotation with the sound recording annotations on which itdepends can appear as a single item. Sound recording annotations can beadded to the sound recording annotation group by clicking the soundrecording add to candidate annotation group button [356]. As a result,the new sound recording annotation appears in the sound recordingcandidate annotation group list box [358]. Once the sound recordingannotations have been added to the sound recording annotation group, theuser can create sound recording derived annotations. Sound recordingderived annotations are annotations that link other sound recordingannotations and then add a comment in a sound recording derivedannotation comment box [353] connected to multiple sound recordingannotation comment boxes. The sound recording derived annotation commentbox [353] is connected to each sound recording annotation comment box[351] using a sound recording annotation connection arrow [352]. A soundrecording derived annotation is created by selecting the desired soundrecording annotations and then clicking the sound recording createderived annotation button [357]. Then, the user types the soundrecording derived annotation comment [361] in the sound recordingderived annotation comment input box [360] and hits enter. In the soundrecording candidate annotation group list box [358] is the soundrecording candidate annotation group list items [362]. This listincludes both the sound recording annotations and the sound recordingderived annotations. The first item in sound recording candidateannotation group list items [362] is the first sound recording candidateannotation group list item [363].

In the exemplary embodiment depicted in FIG. 45, a video [319] and videoannotation playback [320] are shown. Below the video annotation playback[320] is shown the video annotation arrow [364], video annotationcomment box [365], video annotation connection arrow [366], and videoderived annotation comment box [367]. Below the video annotationplayback [320] is a control panel including the video previousannotation arrow button [325], video next annotation arrow button [326],video include collisions button [327], video add to candidate annotationgroup button [328], video create derived annotation button [368], videocandidate annotation group list box [329], video create annotation groupbutton [330], and video derived annotation comment input box [369]. Thelabel of the video add to candidate annotation group button [328] hasthe shorter name “Add To Annotation Group”. However, a video annotationis first added to the video candidate annotation group, which laterbecomes the video annotation group after the user clicks video createannotation group button [330]. To create a video annotation in theexemplary embodiment, the user selects a short segment of the videoannotation playback [320] using the mouse. After the selection is made,a video annotation arrow [364] and video annotation comment box [365]appears originating from the middle of the selection allowing the userto create a video annotation comment in the video annotation comment box[365]. The short segment of the video annotation playback [320] can bemarked as shown by embedded video annotation playback range [375] inFIG. 46. While FIG. 46 shows an embedded video and the marked shortsegment is on the playback bar for the video [319], the same style ofmarked segment can be used on the video annotation playback [320]. Thesegment can also be left unmarked, or the marked segment can appearafter mousing over the selected segment, video annotation arrow [364],or video annotation comment box [365]. In addition, a question videoannotation symbol can be introduced that behaves similarly to thequestion embedded video annotation symbol [376] in FIG. 46.

As previously stated for a different exemplary embodiment, the videoannotations include objects such as video annotation subject boundingbox [322], video annotation arrow [323], and video annotation comment inbox [324]. A video annotation may contain more than one video annotationsubject [321]. In the electronic database [62], video annotations arestored as video annotation objects. These video annotation objects arethen assigned a sequential ordering by the electronic database [62],which gives a sequential ordering to video annotations. This ordering onvideo annotations gives meaning to the concept of previous and nextvideo annotation. The video previous annotation arrow button [325]removes from the displayed view the objects included in the currentvideo annotation, assuming the current video annotation is not acandidate video annotation, and then adds the objects in the previousvideo annotation to the displayed view. The video next annotation arrowbutton [326] removes from the displayed view the objects included in thecurrent video annotation, assuming the current video annotation is not avideo candidate annotation, and then adds the objects in the next videoannotation to the displayed view. Video annotation groups are a group ofvideo annotations that the user wants to group together. These groupingsdisplay as a single item, and one or more video annotations from thevideo annotation group can be used to create derived video annotationsrelating these one or more video annotations. Furthermore, a derivedvideo annotation with the video annotations on which it depends canappear as a single item. Video annotations can be added to the videocandidate annotation group by clicking the video add to candidateannotation group button [328]. As a result, the new video annotationappears in the video candidate annotation group list box [329]. Once thevideo annotations have been added to the video candidate annotationgroup, the user can create video derived annotations. Video derivedannotations are annotations that link other video annotations and thenadd a comment in a video derived annotation comment box [367] connectedto multiple video annotation comment boxes. The video derived annotationcomment box [367] is connected to each video annotation comment box[365] using a video annotation connection arrow [366]. A video derivedannotation is created by selecting the desired video annotations andthen clicking the video create derived annotation button [368]. Then,the user types the video derived annotation comment [370] in the videoderived annotation comment input box [369] and hits enter. In the videocandidate annotation group list box [329] is the video candidateannotation group list items [371]. This list includes both the videoannotations and the video derived annotations. The first item in videocandidate annotation group list items [371] is the first video candidateannotation group list item [372]. The video create annotation groupbutton [330] can be clicked to create an annotation group including thevideo candidate annotations in the video candidate annotation group listbox [329]. The video include collisions button [327] acts in the sameway as the video include collisions button [327] in the exemplaryembodiments depicted in FIG. 40, FIG. 41, FIG. 42, and FIG. 43.

In the exemplary embodiment depicted in FIG. 46, an embedded video [373]and embedded video playback [374] are shown. The embedded video [373]and embedded video playback [374] exist within a web page that is beingviewed with an annotation capable web browser. In the exemplaryembodiment depicted in FIG. 46, the embedded video annotation playbackrange [375], question embedded video annotation symbol [376],disagreement embedded video annotation symbol [377], embedded videoannotation beacon [378], embedded video annotation beacon questionsymbol [379], embedded video annotation beacon disagreement symbol[380], and embedded video annotation beacon play time [381] are shown.The symbols beacon trigger button [57] triggers the display of onecomplete displayed video annotation beacon for each video annotation inthe embedded video [373] unless the embedded video [373] contains morethan 3 video annotations. When more than 3 video annotations arepresent, alternative display methodologies may allow the user to bettervisualize the video annotations that can be viewed. A complete displayedvideo annotation beacon includes the embedded video annotation playbackrange [375], embedded video annotation symbol, embedded video annotationbeacon [378], embedded video annotation beacon symbol, and embeddedvideo annotation beacon play time [381]. The embedded video annotationplayback range [375] highlights the time range the user believes isrelevant to the video annotation. Embedded video annotation symbols suchas the question embedded video annotation symbol [376] and thedisagreement embedded video annotation symbol [377] convey theannotation semantic relationship between the selected video segment andthe video annotation comment. The embedded video annotation beacon [378]serves to draw a user's attention to the existence of a video annotationand some of its properties. The embedded video annotation beacon symbolputs the annotation semantic relationship between the selected videosegment and the video annotation comment in the vicinity of the embeddedvideo annotation beacon [378]. Two examples of the embedded videoannotation beacon symbols are the embedded video annotation beaconquestion symbol [379] and embedded video annotation beacon disagreementsymbol [380]. The embedded video annotation beacon play time [381],which is put in the vicinity of the embedded video annotation beacon[378], conveys the length of the video segment relevant to the videoannotation comment.

In the exemplary embodiment depicted in FIG. 46, the embedded videoannotation playback range [375] and question embedded video annotationsymbol [376] is shown in the context of the embedded video [373] andembedded video playback [374]. However, a video annotation playbackrange and video annotation symbols can also be used on the videoannotation playback [320] depicted in FIG. 45.

In the exemplary embodiment depicted in FIG. 47, an embedded picture[382] is shown. The embedded picture [382] exists within a web page, andthe embedded picture annotation subject [383] occurs within the embeddedpicture [382]. In the exemplary embodiment depicted in FIG. 47, theembedded picture annotation subject bounding box [384], embedded pictureannotation arrow [385], and embedded picture annotation comment in box[386] are shown. The embedded picture annotation subject [383] is anentity of interest in the picture. The embedded picture annotationsubject [383] could be a person, car, soccer ball, tennis ball, or otherobject that is identifiable within a picture by a human or computersystem. The embedded picture annotation subject bounding box [384] is abounding box drawn around the embedded picture annotation subject [383]by a user or computer system. The user can select a rectangle tool froma panel somewhere on the web page or floating toolbar and draw anembedded picture annotation subject bounding box [384]. Furthermore, theuser can enter text and position the embedded picture annotation commentin box [386]. The embedded picture annotation comment in box [386] iscreated by the user, and the annotation comment should relate to theembedded picture annotation subject [383]. The embedded pictureannotation arrow [385] is a line that may have arrowheads on either sidethat connects the embedded picture annotation subject bounding box [384]and the embedded picture annotation comment in box [386]. The embeddedpicture annotation subject bounding box [384], embedded pictureannotation arrow [385], and embedded picture annotation comment in box[386] were created by a user and are the embedded objects included in apicture annotation.

The embedded objects of the picture annotation may not all be visible atthe same time. As an example, it is possible for only the embeddedpicture annotation subject bounding box [384] to be visible with theother embedded objects of the picture annotation becoming visible aftera user mouses over the embedded picture annotation subject [383] or theembedded picture annotation subject bounding box [384]. The visibleelements of the picture annotation are those embedded elements that arevisible without having to mouseover some other element. The mouseoverembedded elements of the picture annotation are those embedded elementsthat become visible when the user mouses over the visible embeddedelements of the picture annotation. While mousing over embedded objectsof the picture annotation, the contextual variant annotation control barbox [387] appears. The user can use the contextual variant annotationcontrol bar [34] embedded in the contextual variant annotation controlbar box [387] to change privacy settings, share by email, share bysocial media, flag the picture annotation as inappropriate, delete thepicture annotation object from the electronic database [62] assumingsufficient permissions, or edit the embedded objects comprising thepicture annotation. Furthermore, the user can use the reputationselector [33] to vote on a reputation for the picture annotation.

In the exemplary embodiment depicted in FIG. 48, an embedded video [373]is shown. The embedded video [373] and embedded video playback [374]exists within a web page, and the embedded video annotation subject[388] occurs within the embedded video [373]. In the exemplaryembodiment depicted in FIG. 48, the embedded video annotation subjectbounding box [389], embedded video annotation arrow [390], and embeddedvideo annotation comment in box [391] are shown. The embedded videoannotation subject [388] is an entity of interest in the video. Theembedded video annotation subject [388] could be a person, car, soccerball, tennis ball, or other object that is identifiable within a videoby a human or computer system. The embedded video annotation subjectbounding box [389] is a bounding box drawn around the embedded videoannotation subject [388] by a user or computer system. As the embeddedvideo annotation subject [388] moves through the video, the embeddedvideo annotation subject bounding box [389] should continue to act as abounding box for the embedded video annotation subject [388]. Theembedded video annotation comment in box [391] is created by the user,and the annotation comment should relate to the embedded videoannotation subject [388]. The embedded video annotation arrow [390] is aline that may have arrowheads on either side that connects the embeddedvideo annotation subject bounding box [389] and the embedded videoannotation comment in box [391]. The embedded video annotation subjectbounding box [389], embedded video annotation arrow [390], and embeddedvideo annotation comment in box [391] were created by a user and are theembedded objects included in a video annotation.

The user can select a rectangle tool from a panel somewhere on the webpage or a floating toolbar and draw the initial embedded videoannotation subject bounding box [389]. Furthermore, the user can entertext and position the embedded video annotation comment in box [391] andconnect them with an embedded video annotation arrow [390]. In order toensure the objects are properly positioned as the video plays, eitherthe user or a computer system needs to determine a motion path for theembedded video annotation subject bounding box [389]. The user creatingthe video annotation has the option of tracing the path of the embeddedvideo annotation subject bounding box [389] as the video plays in time.While embedded video playback [374] plays, the user creating a videoannotation can move the embedded video annotation subject bound-ing box[389] with the mouse to ensure the embedded video annotation subjectbounding box [389] is properly positioned throughout the embedded video.The user can move the embedded video annotation comment in box [391]with the mouse to ensure the embedded video annotation comment in box[391] is properly positioned throughout the video. Either the annotationcapable web browser, web browser extension, or web page code records themotion path as the user drags the mouse. The next time the video plays,the path of the embedded video annotation subject bounding box [389] andembedded video annotation comment in box [391] will evolve along theirrespective motion paths. Once the motion paths of the embedded videoannotation subject bounding box [389] and embedded video annotationcomment in box [391] are known, the motion path of the embedded videoannotation arrow [390] along with its rotation over time, contractionover time, dilation over time, and position over time can be calculatedto correspond to the motion paths of the embedded video annotationsubject bounding box [389] and embedded video annotation comment in box[391]. If the size of the desired bounding box for the embedded videoannotation subject [388] changes as the video plays, the user can alsopause the video and resize the embedded video annotation subjectbounding box [389] and embedded video annotation comment in box [391].

The embedded objects of the video annotation may not all be visible atthe same time. As an example, it is possible for only the embedded videoannotation subject bounding box [389] to be visible with the otherembedded objects of the video annotation becoming visible after a usermouses over the embedded video annotation subject [388] or the embeddedvideo annotation subject bounding box [389]. The visible elements of thevideo annotation are those embedded elements that are visible withouthaving to mouseover some other element. The mouseover embedded elementsof the video annotation are those embedded elements that become visiblewhen the user mouses over the visible embedded elements of the videoannotation. While mousing over embedded objects of the video annotation,the contextual variant annotation control bar box [387] appears. Theuser can use the contextual variant annotation control bar [34] embeddedin the contextual variant annotation control bar box [387] to changeprivacy settings, share by email, share by social media, flag the videoannotation as inappropriate, delete the video annotation object from theelectronic database [62] assuming sufficient permissions, or edit theembedded objects comprising the video annotation. Furthermore, the usercan use the reputation selector [33] to vote on a reputation for thevideo annotation. Associated to each relationship in the group ofannotation semantic relationships is a different embedded videoannotation symbol. As an example, the question embedded video annotationsymbol [376] indicates the creator of the video annotation designatedthe annotation semantic relationship between the selected portion of thevideo and the video annotation comment as a question relationship. Thequestion embedded video annotation symbol [376] allows a user familiarwith how the exemplary embodiment works to know that the user can clickon the question embedded video annotation symbol [376] and see a videoannotation comment that is a question about the embedded videoannotation playback range [375] before the user actually performs theaction of clicking. Corresponding to a question annotation symbol,disagreement annotation symbol, agreement annotation symbol, exclamationannotation symbol, and advertisement annotation symbol are fiverelationships in the group of annotation semantic relationships. Theseannotation semantic relationships are the question relationship,disagreement relationship, agreement relationship, exclamatoryrelationship, and advertisement relationship. These video annotationsymbols and video annotation semantic relationships apply to therelationships between the embedded video annotation playback range [375]and the embedded video annotation comment in box [391].

In the exemplary embodiment depicted in FIG. 49, an embedded soundrecording [392] is shown with an embedded sound recording annotationplayback range [393] and question embedded sound annotation symbol[394]. The embedded sound recording annotation playback range [393]designates the selected portion of the sound recording corresponding tothe sound annotation. Embedded sound annotation symbols are associatedwith elements of a group of annotation semantic relationships. Eachannotation semantic relationship shows a relationship between theembedded sound recording annotation playback range [393] and the soundannotation comment. Associated to each relationship in the group ofannotation semantic relationships is a different embedded soundannotation symbol. As an example, the question embedded sound annotationsymbol [394] indicates the creator of the sound annotation designatedthe annotation semantic relationship between the selected portion of thesound recording and the sound annotation comment as a questionrelationship. The question embedded sound annotation symbol [394] allowsa user familiar with how the exemplary embodiment works to know that theuser can click on the question embedded sound annotation symbol [394]and see a sound annotation comment that is a question about the embeddedsound recording annotation playback range [393] before the user actuallyperforms the action of clicking. The annotation comment box [31] appearswhen mousing over the embedded sound recording annotation playback range[393]. The user can use the contextual variant annotation control bar[34] embedded in the annotation comment box [31] to change privacysettings, share by email, share by social media, flag the soundannotation as inappropriate, delete the sound annotation object from theelectronic database [62] assuming sufficient permissions, or edit theembedded objects comprising the sound annotation. Furthermore, the usercan use the reputation selector [33] to vote on a reputation for thesound annotation. Corresponding to a question annotation symbol,disagreement annotation symbol, agreement annotation symbol, exclamationannotation symbol, and advertisement annotation symbol are fiverelationships in the group of annotation semantic relationships. Theseannotation semantic relationships are the question relationship,disagreement relationship, agreement relationship, exclamatoryrelationship, and advertisement relationship. These sound annotationsymbols and sound annotation semantic relationships apply to therelationships between the embedded sound recording annotation playbackrange [393] and the sound annotation comment [32].

Aspects of the present invention were described in FIG. 35, FIG. 36,FIG. 37, FIG. 38, FIG. 39, FIG. 40, FIG. 41, FIG. 42, FIG. 43, FIG. 44,FIG. 45, FIG. 46, FIG. 47, FIG. 48, and FIG. 49, and it will beunderstood that each item of these GUI diagrams can be implemented bycomputer readable program instructions. Next, methods and systemsrelated to the features and capabilities depicted in the exemplaryembodiments in FIG. 35, FIG. 36, FIG. 37, FIG. 38, FIG. 39, FIG. 40,FIG. 41, FIG. 42, FIG. 43, FIG. 44, FIG. 45, FIG. 46, FIG. 47, FIG. 48,and FIG. 49 will be described and related to material previouslypresented. Describing these methods and systems involves describingbundles of data elements used to receive and store data as well asdisplay bundles used to transmit and display visual elements on clientdevices. As bundles of display elements are described, various itemboxes will be described. Once these item boxes are described, therelation of these elements to the other elements that were presentedincluding the user interface will be discussed. The bundles of dataelements, display bundles, and item boxes that will be described are tobe construed as descriptions within the context of an exemplaryembodiment.

In the context of an exemplary embodiment, bundles of data elements usedfor receiving data from client devices and storing this data using oneor more computer systems will now be described. The bundles of dataelements are picture annotation bundles, video annotation bundles, soundrecording annotation bundles, embedded picture annotation bundles,embedded video annotation bundles, embedded sound recording annotationbundles, annotation group bundles, derived annotation group bundles, andannotation group bundles with derived annotations.

In the context of an exemplary embodiment, picture annotation bundlesinclude one or more picture annotation atoms. A picture annotation atomis a unit that can be meaningfully used by itself to annotate a picture.For example, a picture annotation atom may include a picture annotationsubject bounding box [301], picture annotation comment in box [303], andpicture annotation arrow [302] as shown in the exemplary embodimentdepicted in FIG. 36. However, it is also possible to use a pictureannotation comment in box [303] by itself near the picture annotationsubject [300]. Thus, a picture annotation comment in box [303] can be apicture annotation atom by itself. In addition to the picture annotationatoms, a picture annotation bundle includes frame information about thepicture being annotated. The frame information includes the image sizespecified by the number of pixels along the x-axis and the number ofpixels along the y-axis. Once the image size is specified, the elementscomprising a picture annotation atom such as the picture annotationsubject bounding box [301], picture annotation comment in box [303], andpicture annotation arrow [302] are given relative coordinates based onthe frame information. If the picture annotation subject bounding box[301] is specified by the x and y coordinates of its center, its width,and its length, the coordinates are specified relative to the lower leftcorner of the picture. The picture annotation comment in box [303] canbe specified with a similar method along with markup information for theannotation comment contained in the picture annotation comment in box[303]. This markup information contains font size as well as formattinginformation for the text. In addition, information about the creationmechanism of the text is in the picture annotation bundle. The creationmechanism could be user-written, image captioning using an artificialintelligence (AI) or deep learning model, another annotation, or acombination of techniques. Furthermore, at least one of username,machine learning model, and other annotation data are recorded. If acombination of techniques is used, that information is also in thepicture annotation bundle. The picture annotation arrow [302] can bespecified by the x and y coordinates of its starting and ending points,along with information specifying whether an arrowhead is present at thestarting point and whether an arrow arrowhead is present at the endingpoint. Again, the coordinates are specified relative to the lower leftcorner of the picture. In addition to relative coordinate information,each element included in an annotation atom specifies a generationmechanism. The generation mechanism specifies whether that element wascreated by a user, machine learning model, or simple algorithm. Inaddition, at least one of the username, machine learning model name, andalgorithm name is recorded. In addition, ovals can also be used. Ovalsare specified by the x and y coordinates of the center relative to thelower left corner of the image, the width, the height, and the rotationof the oval. In addition, the generation mechanism along with at leastone of the username, machine learning model name, and algorithm name isrecorded.

In the context of an exemplary embodiment, embedded picture annotationbundles contain all the information within a picture annotation bundleas well as the URL of the web page or document on which the picture islocated. The description written for picture annotation bundles shouldbe interpreted with the embedded picture annotation subject [383]substituted for the picture annotation subject [300], the embeddedpicture annotation subject bounding box [384] substituted for thepicture annotation subject bounding box [301], the embedded pictureannotation arrow [385] substituted for the picture annotation arrow[302], and the embedded picture annotation comment in box [386]substituted for the picture annotation comment in box [303]. Figure FIG.36 and FIG. 47 should be examined for details. If the document is a pdfor complex web page, information to locate the image such as the page ofthe pdf document or DOM locators of the picture are also stored.

In the context of an exemplary embodiment, video annotation bundlesinclude one or more video annotation atoms. A video annotation atom is aunit that can be meaningfully used by itself to annotate a video. Forexample, a video annotation atom may include a video annotation subjectbounding box [322], video annotation subject bounding box motion path[332], video annotation comment in box [324], video annotation commentinput box motion path [334], video annotation arrow [323], and videoannotation arrow motion path [333] as shown in the exemplary embodimentdepicted in FIG. 41. However, it is also possible to use a videoannotation comment in box [324] and video annotation comment input boxmotion path [334] by themselves with the video annotation comment in box[324] near the video annotation subject [321] while the video plays.Thus, the video annotation comment in box [324] and video annotationcomment input box motion path [334] can be a video annotation atom bythemselves. In addition to the video annotation atoms, a videoannotation bundle includes frame information about the video beingannotated. The frame information includes the video size specified bythe number of pixels along the x axis and the number of pixels alongthey axis. This should include the area of the video [319] and not thearea of the video annotation playback [320]. Once the video size isspecified, the elements comprising a video annotation atom such as thevideo annotation subject bounding box [322], video annotation subjectbounding box motion path [332], video annotation comment in box [324],video annotation comment input box motion path [334], video annotationarrow [323], and video annotation arrow motion path [333] are givenrelative coordinates based on the frame information. If the videoannotation subject bounding box [322] is specified by the x and ycoordinates of its center, its width, and its length, the coordinatesare specified relative to the lower left corner of the video. The videoannotation subject bounding box motion path [332] should specify theevolution of the video annotation subject bounding box [322] over time.It specifies the change of the x and y coordinates of its center, itswidth, and its length over time. This specification is done byspecifying the x and y coordinates relative to the lower left corner ofthe video at discrete time points during the video annotation playbackrange along with the interpolation mechanism between these discrete timesteps. Since the relative x coordinate, relative y coordinate, width,and length are real numbers, the same method of storing the values atdiscrete time points and specifying an interpolation method issufficient for all four values. Possible interpolation methods includelinear interpolation, spline curves, bezier curves, and other methods.The video annotation comment in box [324] and video annotation commentinput box motion path [334] can be specified with a similar method alongwith markup information for the annotation comment contained in thevideo annotation comment in box [324]. This markup information containsfont size as well as formatting information for the text. In addition,information about the creation mechanism of the text is in the videoannotation bundle. The creation mechanism could be user-written, videocaptioning using an AI or deep learning model, another annotation, or acombination of techniques. Furthermore, at least one of username,machine learning model, and other annotation data are recorded. If acombination of techniques is used, that information is also in the videoannotation bundle. The video annotation arrow [323] and video annotationarrow motion path [333] can be specified by the relative x and ycoordinates of its starting and ending points along with informationspecifying whether an arrowhead is present at the starting point andwhether an arrowhead is present at the ending point. The specificationof the video annotation arrow motion path [333] is done by specifyingthe relative x and y coordinates of the starting and ending points atdiscrete time points during the video annotation playback range alongwith the interpolation mechanism between these discrete time steps.Again, the coordinates are specified relative to the lower left cornerof the video. In addition to relative coordinate information, eachelement included in an annotation atom specifies a generation mechanism.The generation mechanism specifies whether that element was created by auser, an AI or deep learning model, another annotation, or a combinationof techniques. In addition, at least one of the username, AI or deeplearning model name, and algorithm name is recorded. In addition, ovalscan also be used. Ovals are specified by the x and y coordinates of thecenter relative to the lower left corner of the video, the width, theheight, and the rotation of the oval. In addition, the generationmechanism along with at least one of the username, AI or deep learningmodel name, and algorithm name are recorded. Video annotation symbolinformation can also be included in video annotation bundles.

In the context of an exemplary embodiment, embedded video annotationbundles contain all the information within a video annotation bundle aswell as the URL of the web page or document on which the video islocated. The description written for video annotation bundles should beinterpreted with the embedded video annotation subject [388] substitutedfor the video annotation subject [321], the embedded video annotationsubject bounding box [389] substituted for the video annotation subjectbounding box [322], the embedded video annotation arrow [390]substituted for the video annotation arrow [323], the embedded videoannotation comment in box [391] substituted for the video annotationcomment in box [324], the embedded video annotation subject bounding boxmotion path substituted for the video annotation subject bounding boxmotion path [332], the embedded video annotation arrow motion pathsubstituted for the video annotation arrow motion path [333], theembedded video annotation comment in box motion path substituted for thevideo annotation comment input box motion path [334], and the embeddedvideo annotation symbol substituted for the video annotation symbol.FIG. 48 should be examined for details. If the document is a pdf orcomplex web page, information to locate the video such as the page ofthe pdf document or DOM locators of the video are also stored.

In the context of an exemplary embodiment, sound recording annotationbundles include one or more sound recording annotation atoms. A soundrecording annotation atom is a unit that can be meaningfully used byitself to annotate a sound recording. For example, a sound recordingannotation atom may include a sound recording annotation playback range,sound recording annotation symbol, and sound recording annotationcomment. However, it is possible to use just a sound recordingannotation playback range and sound recording annotation comment. Thus,the sound recording annotation playback range and sound recordingannotation comment can comprise the sound recording annotation atom byitself. The sound recording annotation comment may have associatedmarkup information for the sound recording annotation comment. Thismarkup information contains font size as well as formatting informationfor the text. In addition, information about the creation mechanism ofthe text is in the sound recording annotation bundle. The creationmechanism could be user-written, sound recognition using an AI or deeplearning model, copying another annotation, or a combination oftechniques. In addition, the creation mechanism along with at least oneof the username, AI or deep learning model name, and other annotationreferences are recorded. More than one source name type is recorded whena combination of techniques is used. The sound recording annotationplayback range can also be determined based on sound search. Thus, thegeneration mechanism for the sound recording playback range also shouldbe recorded along with at least one of the username, AI or deep learningmodel name, or other annotation comment. More than one generationmechanism and source information are recorded when a combination oftechniques are used. In addition, sound recording frame information isrecorded to facilitate the placement of sound recording annotationplayback ranges on the sound recording annotation playback controls.

In the context of an exemplary embodiment, embedded sound recordingannotation bundles contain all the information within a sound recordingannotation bundle as well as the URL of the web page or document onwhich the sound recording is located. The description written for soundrecording annotation bundles should be interpreted with embedded soundrecording annotation playback range [393] substituted for soundrecording playback range, embedded sound recording annotation symbolsubstituted for sound recording annotation symbol, and embedded soundannotation comment substituted for sound annotation comment.Furthermore, it should be understood that embedded sound recording frameinformation is recorded with the embedded sound recording annotationbundle to facilitate the placement of the embedded sound recordingannotation playback range [393] on the embedded sound recording playbackcontrols. Figure FIG. 44 and FIG. 49 should be examined for details. Ifthe document is a complex web page, information to locate the soundrecording, such as the DOM locators of the sound recording, are alsostored.

In the context of an exemplary embodiment, annotation group bundlesinclude references to all the annotations included in that particularannotation group. In addition, information about whether or not theannotations collide is stored along with metadata indicating when theannotation group was created and whether collision detection was done bya user or AI or deep learning model. At least one of the user and AI ordeep learning model performing collision detection is also stored in theannotation group bundle.

In the context of an exemplary embodiment, derived annotation groupbundles include references to all the annotations included in thatparticular derived annotation group. In addition, information aboutwhether or not the annotations collide is stored along with metadataindicating when the annotation group was created and whether collisiondetection was done by a user or M or deep learning model. At least oneof the user and AI or deep learning model performing collision detectionis also stored in the derived annotation group bundle. A derivedannotation group bundle contains one derived annotation along withreferences to all the annotations included in that particular annotationgroup. The annotation connection arrows can be determined from theannotation references present within the derived annotation groupbundle. In this exemplary embodiment, only one derived annotation ispresent, which provides all information to draw annotation connectionarrows. In addition, the derived annotation comment is stored in thederived annotation group bundle. Markup information for the derivedannotation comment is also stored. This markup information contains fontsize as well as formatting information for the text. In addition,information about the creation mechanism of the text is in the derivedannotation group bundle. The creation mechanism could be user-written,AI or deep learning model generated, another annotation copied, or acombination of techniques. Furthermore, at least one of username,machine learning model, and other annotation data are recorded. If acombination of techniques is used, that information is also in thederived annotation group bundle.

In the context of an exemplary embodiment, annotation group with derivedannotations bundles include references to all the derived annotationsand annotations present in that particular annotation group with derivedannotations. In addition, information about whether or not theannotations collide is stored along with metadata indicating when theannotation group with derived annotations was created and whethercollision detection was done by a user or AI or deep learning model. Atleast one of the user and AI or deep learning model performing collisiondetection is also stored in the annotation group bundle.

Next, some types of display bundles and item boxes will be described.These descriptions are construed to be in the context of an exemplaryembodiment. In the context of an exemplary embodiment, the displaybundles that will be described are picture annotation display bundles,video annotation display bundles, sound recording annotation displaybundles, embedded picture annotation display bundles, embedded videoannotation display bundles, embedded sound recording annotation displaybundles, annotation group display bundles, derived annotation groupdisplay bundles, and annotation group with derived annotations displaybundles. In the context of an exemplary embodiment, the item boxes thatwill be described are the picture annotation item box, video annotationitem box, sound recording annotation item box, embedded pictureannotation item box, embedded video annotation item box, embedded soundrecording item box, annotation group item box, derived annotation groupitem box, and annotation group with derived annotations item box. Onepurpose of display bundles, in an exemplary embodiment, is to providethe data for a web browser to display the corresponding item boxassociated to that type of annotation or media item. Thus, item boxeswill be described in relation to the annotation item box [36] presentedin the exemplary embodiment depicted in FIG. 9. In addition to thenumbered items in the annotation item box, the annotation item box alsocontains the item box annotation highlighted text, item box annotationsymbol, item box annotation comment, and item box URL. Once the variousitem boxes are described in the context of an exemplary embodiment, thedata structures corresponding to the various display bundles can beillustrated. In addition, referring to displayed bundles is sometimeshelpful for illustrative purposes. Displayed bundles are the visualoutput created using display bundles. This visual output is containedwithin an item box. In contexts such as the notepad, the displayedbundle may be present without an entire item box being present.

In an exemplary embodiment, a picture annotation item box will includethe separate context variant annotation control bar [41] and separatecontext reputation selector [42] like the annotation item box [36], asshown in the exemplary embodiment in FIG. 9. In place of the screenshotwith marked text [37], a picture annotation item box will contain athumbnail of the picture along with the picture annotation displayedover the thumbnail picture. In place of the separate context annotationhighlighted text [38], separate context question displayed annotationsymbol [39], and separate context annotation comment [40], the pictureannotation item box will have the picture annotation comment. The URLwill not be present for picture annotation item boxes, but it will bepresent for embedded picture annotation item boxes. To ensure the webbrowser can display these picture annotation item boxes, the pictureannotation display bundle should contain a marked thumbnail image of thepicture with the picture annotation displayed over it with objects suchas the picture annotation subject bounding box [301], picture annotationcomment in box [303], and picture annotation arrow [302] resized andoverlaid properly. In addition, the picture annotation display bundlewill need to contain the picture annotation comment, username, andreputation information.

In an exemplary embodiment, an embedded picture annotation item box willinclude the separate context variant annotation control bar [41] andseparate context reputation selector [42] like the annotation item box[36]. In place of the screenshot with marked text [37], an embeddedpicture annotation item box will contain a thumbnail of the embeddedpicture along with the picture annotation displayed over the thumbnailpicture. In place of the separate context annotation highlighted text[38], separate context question displayed annotation symbol [39], andseparate context annotation comment [40], the embedded pictureannotation item box will have the embedded picture annotation comment.The URL will correspond to the URL including the embedded picture thatwas annotated with a picture annotation. To ensure the web browser candisplay these embedded picture annotation item boxes, the embeddedpicture annotation display bundle should contain a marked thumbnailimage of the embedded picture with the picture annotation displayed overit with objects such as the embedded picture annotation subject boundingbox [384], embedded picture annotation comment in box [386], andembedded picture annotation arrow [385] resized and overlaid properly.In addition, the embedded picture annotation display bundle will need tocontain the embedded picture annotation comment, username, andreputation information.

In an exemplary embodiment, a video annotation item box will include theseparate context variant annotation control bar [41] and separatecontext reputation selector [42] like the annotation item box [36], asshown in the exemplary embodiment in FIG. 9. In place of the screenshotwith marked text [37], a video annotation item box will contain athumbnail of the video frame at some chosen point in time along with thevideo annotation displayed over the thumbnail of the video frame at thesame chosen point in time. Furthermore, a play button can allowthumbnail videos to play, showing a portion of the thumbnail video andvideo annotation. In place of the separate context annotationhighlighted text [38] will be video sound summarization text that is amachine-generated piece of text summarizing the sound in the video.Next, the video annotation item box will have a video annotationcomment, and the video annotation item box will also have a videoannotation symbol determining the annotation semantic relationshipbetween the video sound summarization text and video annotation comment.The URL will not be present for video annotation item boxes, but it willbe present for embedded video annotation item boxes. To ensure the webbrowser can display these video annotation item boxes, the videoannotation display bundle should contain a marked thumbnail image of thevideo frame at some chosen point in time with the video annotationdisplayed over it with objects such as the video annotation subjectbounding box [322], video annotation comment in box [324], and videoannotation arrow [323] resized and overlaid properly. In case a userhits the play button, the video annotation display bundle will need tocontain a thumbnail video with the video annotation overlaid. Inaddition, the video annotation display bundle will need to contain thevideo sound summarization text, video annotation symbol, videoannotation comment, username, and reputation information. Furthermore,users will be allowed to modify machine-generated aspects of videoannotations.

In an exemplary embodiment, an embedded video annotation item box willinclude the separate context variant annotation control bar [41] andseparate context reputation selector [42] like the annotation item box[36], as shown in the exemplary embodiment in FIG. 9. In place of thescreenshot with marked text [37], an embedded video annotation item boxwill contain a thumbnail of the embedded video frame at some chosenpoint in time along with the embedded video annotation displayed overthe thumbnail of the embedded video frame at the same chosen point intime. Furthermore, a play button can allow thumbnail videos to play,showing a portion of the thumbnail video and video annotation. In placeof the separate context annotation highlighted text [38] will be theembedded video sound summarization text that is a machine-generatedpiece of text summarizing the sound in the video. Next, the embeddedvideo annotation item box will have an embedded video annotationcomment, and the embedded video annotation item box will also have anembedded video annotation symbol determining the annotation semanticrelationship between the embedded video sound summarization text andembed-ded video annotation comment. The URL of the web page in which thevideo is embedded will be shown in the embedded video annotation itembox. To ensure the web browser can display these embedded videoannotation item boxes, the embedded video annotation display bundleshould contain a marked thumbnail image of the embedded video frame atsome chosen point in time with the embedded video annotation displayedover it with objects such as the embedded video annotation subjectbounding box [389], embedded video annotation comment in box [391], andembedded video annotation arrow [390] resized and overlaid properly. Incase a user hits the play button, the embedded video annotation displaybundle will need to contain a thumbnail video with the embedded videoannotation overlaid. In addition, the embedded video annotation displaybundle will need to contain the embedded video sound summarization text,embedded video annotation symbol, embedded video annotation comment,username, and reputation information. Furthermore, users will be allowedto modify machine-generated aspects of video annotations.

In an exemplary embodiment, a sound recording annotation item box willinclude the separate context variant annotation control bar [41] andseparate context reputation selector [42] like the annotation item box[36], as shown in the exemplary embodiment in FIG. 9. In place of thescreenshot with marked text [37], a sound recording annotation item boxwill contain a thumbnail representative of the sound recording calledthe thumbnail associated sound recording image. This will be done byfirst creating sound recording summarization text that converts thesound recording into a textual representation. This will be done byusing voice recognition and other sound understanding technologies. Oncea textual representation is created, an image associated with that soundrecording summarization text can be found using AI or deep learningmodels. This image will be called the associated sound recording image.A thumbnail representation of the associated sound recording image isthe thumbnail associated sound recording image. In place of the separatecontext annotation highlighted text [38] will be the sound recordingsummarization text. Next, the sound recording annotation item box willhave a sound recording annotation comment, and the sound recordingannotation item box will also have a sound recording annotation symboldetermining the annotation semantic relationship between the soundrecording summarization text and sound recording annotation comment. TheURL will not be present for sound recording annotation item boxes, butit will be present for embedded sound recording annotation item boxes.To ensure the web browser can display these sound recording annotationitem boxes, the sound recording annotation display bundle should containthe thumbnail associated sound recording image, sound recordingsummarization text, sound recording annotation comment, sound recordingannotation symbol, username, and reputation information. Furthermore,users will be allowed to modify machine-generated aspects of soundrecording annotations.

In an exemplary embodiment, an embedded sound recording annotation itembox will include the separate context variant annotation control bar[41] and separate context reputation selector [42] like the annotationitem box [36]. In place of the screenshot with marked text [37], anembedded sound recording annotation item box will contain a thumbnailrepresentative of the embedded sound recording called the thumbnailassociated embedded sound recording image. This will be done by firstcreating embedded sound recording summarization text that converts theembedded sound recording into a textual representation. This will bedone by using voice recognition and other sound understandingtechnologies. Once a textual representation is created, an imageassociated with that embedded sound recording summarization text can befound using AI or deep learning models. This image will be called theassociated embedded sound recording image. A thumbnail representation ofthe associated embedded sound recording image is the thumbnailassociated embedded sound recording image. In place of the separatecontext annotation highlighted text [38] will be the embedded soundrecording summarization text. Next, the embedded sound recordingannotation item box will have an embedded sound recording annotationcomment, and the embedded sound recording annotation item box will alsohave an embedded sound recording annotation symbol determining theannotation semantic relationship between the embedded sound recordingsummarization text and embedded sound recording annotation comment. TheURL of the website on which the embedded sound recording is found willbe present for embedded sound recording annotation item boxes. To ensurethe web browser can display these embedded sound recording annotationitem boxes, the embedded sound recording annotation display bundleshould contain the thumbnail associated embedded sound recording image,embedded sound recording summarization text, embedded sound recordingannotation comment, embedded sound recording annotation symbol,username, and reputation information. Furthermore, users will be allowedto modify machine-generated aspects of sound recording annotations.

In an exemplary embodiment, an annotation group item box will includethe separate context variant annotation control bar [41] and separatecontext reputation selector [42] like the annotation item box [36], asshown in the exemplary embodiment in FIG. 9. In place of the screenshotwith marked text [37], an annotation group item box will contain athumbnail representative of the annotation group. For pictureannotations, this means a thumbnail image of the picture with allpicture annotations included in the annotation group. Pictureannotations and annotation groups include picture annotations ofembedded pictures. For video annotations, this means a thumbnail imageof the video at a point in time with all the video annotations includedin the annotation group at that same point in time. Furthermore,thumbnail videos would include thumbnail videos with all videoannotations in the annotation group displayed throughout the thumbnailvideo. Video annotations and annotation groups include video annotationsof embedded videos. For sound recording annotations, this means athumbnail image representative of the sound for all sound recordingplayback ranges for all the sound recording annotations in theannotation group. Such an image would be based on the sound recordingsummarization text for all the sound recording playback ranges. In placeof the separate context annotation highlighted text [38] will be a listof annotations in that particular annotation group. In place of theseparate context annotation comment [40] will be a user-generatedcomment about that particular annotation group. Furthermore, theseelements can be modified by users if machine-generated images anddefault text is not suitable. In an alternative embodiment, the list ofannotations in the annotation group can be replaced by more suitablesummarization text generated by a human. The URL will not be present forannotation group item boxes that do not have any embedded annotations,but the URL will be present for annotation group item boxes includingembedded annotations. An embedded annotation group annotation symbol canbe used denoting a semantic relationship amongst the source material andannotations in the annotation group. An annotation group item box willalso indicate the number of annotations in the annotation group. Toensure the web browser can display these annotation group annotationitem boxes, the annotation group display bundle should include therelevant thumbnail image or thumbnail video, list of references toannotation objects, relevant summarization text, relevant annotationcomment, relevant annotation group annotation symbol, username, andreputation information. Furthermore, users will be allowed to modifymachine-generated aspects of annotation groups.

In an exemplary embodiment, a derived annotation group item box willinclude the separate context variant annotation control bar [41] andseparate context reputation selector [42] like the annotation item box[36], as shown in the exemplary embodiment in FIG. 9. In place of thescreenshot with marked text [37], a derived annotation group item boxwill contain a thumbnail representative of the derived annotation group.For picture annotations, this means a thumbnail image of the picturewith all picture annotations included in the derived annotation group.Picture annotations and derived annotation groups include pictureannotations of embedded pictures. For video annotations, this means athumbnail image of the video at a point in time with all the videoannotations included in the derived annotation group at that same pointin time. Furthermore, thumbnail videos would include thumbnail videoswith all video annotations in the derived annotation group displayedthroughout the thumbnail video. Video annotations and derived annotationgroups include video annotations of embedded videos. For sound recordingannotations, this means a thumbnail image representative of the soundfor all sound recording playback ranges for all the sound recordingannotations in the derived annotation group. Such an image would bebased on the sound recording summarization text for all the soundrecording playback ranges. In place of the separate context annotationhighlighted text [38] will be a list of annotations in that particularderived annotation group. In place of the separate context annotationcomment [40] will be a user-generated comment about that particularderived annotation group. Furthermore, these elements can be modified byusers if machine-generated images and default text is not suitable. Inan alternative embodiment, the list of annotations in the derivedannotation group can be replaced by more suitable summarization textgenerated by a human. The URL will not be present for derived annotationgroup item boxes that do not have any embedded annotations, but the URLwill be present for derived annotation group item boxes includingembedded annotations. A derived annotation group annotation symbol canbe used denoting a semantic relationship amongst the source material andannotations in the annotation group. To ensure the web browser candisplay these annotation group annotation item boxes, the annotationgroup display bundle should include the relevant thumbnail image orthumbnail video, list of references to annotation objects, relevantsummarization text, relevant derived annotation comment, relevantderived annotation group annotation symbol, username, and reputationinformation. Furthermore, users will be allowed to modifymachine-generated aspects of derived annotation groups.

At this point, annotation groups and derived annotation groups mayappear similar within the context of the exemplary embodiments that havebeen described. However, derived annotation groups, derived annotationgroup item boxes, and derived annotation group display bundles, whenused, will be handled differently from annotation groups, annotationgroup item boxes, and annotation group display bundles. Annotationgroups indicate a much closer link between the annotations, and derivedannotation groups can be incorporated into annotation groups. The impactof these differences can be seen by examining FIG. 44 and FIG. 45.

In an exemplary embodiment, an annotation group with derived annotationsitem box will include the separate context variant annotation controlbar [41] and separate context reputation selector [42] like theannotation item box [36], as shown in the exemplary embodiment in FIG.9. An annotation group with derived annotations item box andcorresponding annotation group with derived annotations display bundleis similar to an annotation group item box and annotation group displaybundle except for the fact that information about the derivedannotations such as its constituent annotations and the derivedannotation comment is present for each derived annotation group. Thepresence of this information allows the display of derived annotationsas depicted in FIG. 44 and FIG. 45. In addition, the annotation groupwith derived annotations item box displays the number of annotations andthe number of derived annotation groups within the annotation group withderived annotations. All of this information is reflected in theannotation group with derived annotations display bundle. An annotationgroup with derived annotations item box will include the separatecontext variant annotation control bar [41] and separate contextreputation selector [42] like the annotation item box [36]. In place ofthe screenshot with marked text [37], an annotation group with derivedannotations item box will contain a thumbnail representative of theannotation group with derived annotations. For picture annotations, thismeans a thumbnail image of the picture with all picture annotationsincluded in the annotation group with derived annotations. Since derivedannotation groups alter images by virtue of the annotations that arecontained in the derived annotation group, it is the set of allannotations contained in the annotation group with derived annotationsthat matters. Picture annotations and annotation groups include pictureannotations of embedded pictures. For video annotations, this means athumbnail image of the video at a point in time with all the videoannotations included in the annotation group with derived annotations atthat same point in time. Furthermore, thumbnail videos would includethumbnail videos with all video annotations in the annotation group withderived annotations displayed throughout the thumbnail video. Again, itis the set of all annotations contained in the annotation group withderived annotations that matters. Video annotations and annotationgroups include video annotations of embedded videos. For sound recordingannotations, this means a thumbnail image representative of the soundfor all sound recording playback ranges for all the sound recordingannotations in the annotation group with derived annotations. Such animage would be based on the sound recording summarization text for allthe sound recording playback ranges in the set of all annotations in theannotation group with derived annotations. In place of the separatecontext annotation highlighted text [38] will be a list of annotationsin that particular annotation group with derived annotations. In placeof the separate context annotation comment [40] will be a user-generatedcomment about that particular annotation group with derived annotations.Furthermore, these elements can be modified by users ifmachine-generated images and default text is not suitable. In analternative embodiment, the list of annotations in the annotation groupwith derived annotations can be replaced by more suitable summarizationtext generated by a human. The URL will not be present for annotationgroup with derived annotations item boxes that do not have any embeddedannotations, but the URL will be present for annotation group withderived annotations item boxes including embedded annotations. Anembedded annotation group with derived annotations symbol can be useddenoting a semantic relationship amongst the source material andannotations in the annotation group with derived annotations. Anannotation group with derived annotations item box will also indicatethe number of annotations in the annotation group with derivedannotations as well as the number of derived annotation groups. Toensure the web browser can display these annotation group with derivedannotations item boxes, the annotation group with derived annotationsdisplay bundle should include the relevant thumbnail image or thumbnailvideo, list of references to annotation objects, relevant summarizationtext, relevant annotation comment, relevant annotation group withderived annotations symbol, username, and reputation information.Furthermore, users will be allowed to modify machine-generated aspectsof annotation groups with derived annotations.

Having discussed the various types of bundles of data elements, displaybundles, and item boxes within the context of an exemplary embodiment,the changes that need to be made to FIG. 14, FIG. 15, FIG. 16, FIG. 17,and FIG. 18 will be described. These changes adapt those sequencediagrams and flowcharts to implement methods and systems related to thefeatures and capabilities shown and described in the writtendescriptions and in the exemplary embodiments depicted in FIG. 35, FIG.36, FIG. 37, FIG. 38, FIG. 39, FIG. 40, FIG. 41, FIG. 42, FIG. 43, FIG.44, FIG. 45, FIG. 46, FIG. 47, FIG. 48, and FIG. 49. The sequencediagram in FIG. 14 applies with one of the bundles of data elementspreviously described along with its corresponding display bundle and itscorresponding displayed bundle where the annotation creation process isdifferent for the different types of annotations previously describedwhen the different types of annotations are implemented. The displaybundle occurs where FIG. 14 uses annotation display bundle, and thedisplayed bundle occurs where FIG. 14 uses displayed annotation bundle.The sequence diagram in FIG. 15 also applies with the display bundlesand displayed bundles previously described. These display bundles occurwhere annotation displayed bundles occur in FIG. 15, and the displayedbundles occur where FIG. 15 uses displayed annotation bundles. A displaybundle has the data to display either its corresponding item box or itscorresponding displayed bundle. Depending on the exemplary embodiment,either an item box or a displayed bundle can be shown in the userinterface. Typically, the item box is the displayed bundle along withthe separate context variant annotation control bar [41] and separatecontext reputation selector [42]. The separate context variantannotation control bar [41] and separate context reputation selector[42] are shown for the annotation item box [36] in the exemplaryembodiment shown in FIG. 9. The sequence diagram in FIG. 16 applies withannotation symbol display bundles replaced with the appropriate embeddedannotation display bundles and closed displayed annotation symbolsreplaced with the visible elements of the appropriate embeddedannotation. Embedded annotation display bundles and visible elements ofembedded annotations were previously discussed. FIG. 17 and FIG. 18apply as they are, wherein the bundle of data elements and displaybundles are chosen from the types that were previously specified herein.

In an exemplary embodiment, the item bin [44] inside the annotationorganization context area [43] in FIG. 10 can contain annotation itemboxes, embedded picture annotation item boxes, embedded video annotationitem boxes, embedded sound recording item boxes, annotation group itemboxes, derived annotation group item boxes, annotation group withderived annotations item boxes, and notepads. Notepads can also bedisplayed as a notepad item box. All of these types of item boxes have aseparate context variant annotation control bar [41] as depicted for theannotation item box [36]. While the other elements of the annotationitem box [36] change for other types of item boxes, the separate contextvariant annotation control bar [41] and the displayed form factor of theitem box does not change. This allows the integration of these new typesof item boxes into the item bin [44]. All these item types are createdon an external site, and they appear in the item bin [44] shortly afterthe user creates these items. This is facilitated through the use of websockets that push information from the annotation server [61] to allconnected web browsers that should receive the display bundles based onaccess controls and use case. Item boxes can be moved from the item bin[44] to a writeable collection represented by a displayed writeablecollection [50] as depicted in the exemplary embodiment in FIG. 11.Furthermore, annotation item boxes, embedded picture annotation itemboxes, embedded video annotation item boxes, and embedded soundrecording item boxes can be added to the active notepad [159] using theadd to notepad icon [158] button located in the contextual variantannotation control bar [34] as depicted in the exemplary embodiment inFIG. 23. The add to notepad icon [158] button does not appear in thecontextual variant annotation control bar [34] labelled in all figures.However, such a button can be added to the contextual variant annotationcontrol bar [34] within an exemplary embodiment. Other item types canalso be added to the active notepad [159] using a trigger to perform theaddition to the notepad. In all cases, clicking on the item box withinthe active notepad [159] should open the relevant item in a browser tab,scroll to the location of the annotation, and display the annotation.All the different types of item boxes can appear within collections.While the collection displayed in the exemplary embodiment depicted inFIG. 31 only shows annotation item boxes, all types of item boxes can bepresent within a collection. All the comments about stacked set ofdisplayed annotation items apply to stacked sets of items of varioustypes. In addition, the comments about windowing functions also apply.Stacked sets of items can be grouped based on URL or based on thepicture item, video item, sound recording item, or document item that isbeing annotated. Furthermore, the types of items that are included in acollection do not alter the other properties of collections. Collectionsrepresented by displayed collections can be displayed on pages similarto the one shown in the exemplary embodiment of FIG. 32.

As previously mentioned, filters such as the search filter shown in theexemplary embodiment in FIG. 10 are used to receive inputs from users.In the case of the item bin [44] search filter [46], it is a searchphrase. These inputs are translated into parameter values sent to theannotation server [61]. These parameter values are used by theannotation server [61] to input parameters into a request query that isused by the electronic database [62]. The request query includesparameter values and a page number. The request query with parametervalues is used to specify a set of items and a sequential ordering onthose items. These items include web page annotations, embedded pictureannotations, embedded video annotations, embedded sound recordings,picture annotations, video annotations, sound recording annotations,annotation groups, derived annotation groups, annotation groups withderived annotations, pdf document annotations, pdf documents, pictures,videos, links, and ordinary comments. Filters can also restrict tocertain item types. The page number specifies a specific page.Furthermore, the request query may include a specified number of itemsthat are to be sent to the web browser running on the client electronicdevice. This request query contains parameters for filter values such assearch phrases and an exclusion list of items to exclude from thespecified list of items and sequential ordering on that list of items.As previously discussed, this sequential ordering provides theinformation for paging in the exemplary embodiments depicted in FIG. 10and FIG. 31. Collection filters and collection paging works aspreviously described for the descriptions of the exemplary embodimentsdepicted in FIG. 10 and FIG. 32. The same applies to pinningfunctionality.

The inbox described in the exemplary embodiment depicted in FIG. 33would function in a similar way when collections include different itemtypes. The change would be that users can now discuss granular detailsof more item types within collection messages. Furthermore,functionality can be built within message chains specialized to eachtype of item. Then, functionality can be implemented to change objectsthat are components of an annotation, approve changes to an annotation,or fork an annotation that is added to the current collection. Ifdiscourse is focused around a picture annotation, selectors for eachobject in the picture annotation can be used to facilitate discussion.Furthermore, selectors for other item types such as video annotations orsound recording annotations can be built into the message chainfunctionality. Such functionality can transform the video annotationsubject bounding box [322], video annotation comment in box [324], orvideo annotation arrow [323], and change the video annotation subjectbounding box motion path [332], video annotation arrow motion path[333], and video annotation comment input box motion path [334]. Afterthe changes are proposed in a message chain, the owner of the item canapprove the changes, or an admin can approve forking the item into a newitem in the context of the current collection.

The exemplary embodiments depicted in FIG. 28 and FIG. 29 also applywhen multiple item types are present. In this situation, the annotationserver [61] and electronic database [62] will handle these differenttypes of items. In the exemplary embodiment, the annotation server [61]may have REST APIs to handle different item types, and the electronicdatabase [62] has a schema that handles the different data elements inthe various types of bundles. The hardware requirements are impacted inthe following ways. If video [319] is not stored locally and isreference through a URL, the presence of video [319] will not increasestorage requirements as much as if video [319] is stored locally. If itis stored locally or through the content delivery network [63], video[319] will have a bigger impact on storage requirements. The presence ofsound recording playback [348] may create the need to use deep learningmodels to handle voice and sound recognition. The presence of video[319] will increase the computational processing requirements of thesystem since video [319] typically has greater computational processingrequirements than other media types.

To provide additional annotation features to the user in an exemplaryembodiment, machine learning and deep learning models can be deployedand configured through the web browser extension of an annotationcapable web browser. It is also possible to handle the deployment andconfiguration directly through an annotation capable web browser if theannotation capable web browser is not built through the use of a webbrowser extension. This functionality can be made available to the userthrough a panel somewhere on the web page or a floating toolbar. Thisfunctionality can also be exposed through menu options or a fixedbrowser toolbar. The floating toolbar can also be attached to a locationof the page or placed inside a side panel in the web browser. Forpictures and embedded pictures, this panel or floating toolbar can makeavailable buttons to handle the tasks of recognizing objects in images,recognizing text in images, configuring the recognition characteristicsof the object and text detectors, and configuring the characteristics ofthe annotation elements. The annotation subject bounding box, annotationarrow, and annotation comment box are annotation elements. The objectrecognition button draws annotation subject bounding boxes with dashedlines around potential annotation subjects. The user can then select theannotation subject bounding box of interest and write an annotationcomment in the annotation comment input box that appears. Based onconfiguration settings, an annotation arrow may automatically becreated. The user can also be provided the option to select multipleannotation subject bounding boxes that can result in the creation of oneannotation arrow for each annotation subject bounding box with one endof each annotation arrow pointing at the annotation subject bounding boxand the other end pointing at the annotation comment input box orannotation comment box depending on whether or not the annotationcomment has been written. The placement of arrowheads is a configurationproperty. Another configurable property is the visibility characteristicof the annotation subject bounding box, annotation arrow, and theannotation comment box. The visibility characteristics include visible,mouseover, and invisible. Visible is for always visible annotationelements. Mouseover is for annotation elements that become visible onmouseover of target areas. And invisible is for annotation elements thatare always invisible. The mouseover target areas could be at least oneof the annotation subject or the annotation element that is visible. Inan alternative embodiment, annotation subject outlines, enclosing aclosed region that includes the pixels of the annotation subject, areused. These annotation subject outlines as opposed to annotation subjectbounding boxes can be used. Furthermore, the object outline can be amouseover element as opposed to a visible element, wherein thisvisibility characteristic can be controlled through a configurationsetting. It is also possible to have a configuration setting that allowsthe user to choose whether to use annotation subject bounding boxes orannotation subject outlines. Determining the annotation subject boundingboxes or annotation subject outlines relies on machine learning or deeplearning models that can recognize objects and determine annotationsubject bounding boxes or annotation subject outlines. Deep learningmodels can be run in the web browser running on a client electronicdevice either by using the CPU or GPU of the client electronic device.The GPU can be used through the use of the WebGL interface exposed bymodern web browsers that in turn uses the GPU of the client electronicdevice. Annotation subject bounding boxes and annotation subjectoutlines can then be determined through the use of annotation objectdetectors using region-based convolution neural networks (R-CNNs) orthrough object segmentation using region-based convolution neuralnetworks (R-CNNs). In addition to R-CNN based models, alternativeembodiments can employ other machine learning or deep learning methods.Since different deep learning models have different recognitioncharacteristics, the user can input the desired recognitioncharacteristics of the object and text detectors. Different machinelearning or deep learning models can be selected based on thosecharacteristics. Text in images can be recognized through the use ofconvolution neural networks (CNNs) designed to recognize variousletters, numbers, and other characters. Furthermore, the user can selectwhether to group individual characters into words, and whether to groupindividual words into n-grams in the configuration options. Furthermore,the user can input words or tags through configuration options availablefor recognition characteristics to limit object recognition to thespecified types of objects the user has input. For handling videos andembedded videos, an additional button is provided for the configurationof annotation element motion paths. The techniques described forpictures can also be implemented in individual frames of videos.Furthermore, deep learning models can track annotation subjects throughtime and ensure that annotation subject bounding boxes and annotationsubject outlines move with the annotation subject. This can be donethrough individual frame analysis at discrete points and then usinginterpolation methods between the discrete points. This yields motionpaths for the annotation subject bounding box and annotation subjectoutline. The contour shifts in the annotation subject outline are alsocomputed. The configuration of these motion paths and annotation outlineevolutions is available to the user through the additional button in thepanel, menu option, browser toolbar, or floating toolbar handlingconfiguration options of motion paths of annotation elements. Machinelearning and deep learning models for voice and sound recognition invideos for annotation purposes can be handled by another configurationoption in the panel, menu options, browser toolbar, or floating toolbar.

As used herein, the word “exemplary” means “serving as an example,instance, or illustration.” Any implementation described herein as“exemplary” is not necessarily to be construed as preferred oradvantageous over other implementations, nor is it intended to beconstrued as a model that must be literally duplicated. Thus, thedescription is to be regarded as illustrative instead of restrictive onthe present invention.

Conditional language, such as, among others, “can,” “could,” “might,” or“may,” unless specifically stated otherwise, or otherwise understoodwithin the context as used, is generally intended to convey that certainembodiments include, while other embodiments do not include, certainfeatures, elements and/or steps. Thus, such conditional language is notgenerally intended to imply that features, elements and/or steps are inany way required for one or more embodiments or that one or moreembodiments necessarily include logic for deciding, with or without userinput or prompting, whether these features, elements and/or steps areincluded or are to be performed in any particular embodiment. Theheadings used herein are for the convenience of the reader and are notmeant to limit the scope of the invention or claims.

As used herein, a phrase referring to “at least one of” a list of itemsrefers to any combination of those items, including single members. Asan example, “at least one of A, B, or C” is intended to cover A, B, C, Aand B, A and C, B and C, and A, B, and C. Conjunctive language such asthe phrase “at least one of X, Y and Z,” unless specifically statedotherwise, is otherwise understood within the context as used in generalto convey that an item, term, etc. may be at least one of X, Y or Z.Thus, such conjunctive language is not generally intended to imply thatcertain embodiments require at least one of X, at least one of Y, and atleast one of Z to each be present.

The flowchart, GUI, sequence, system, component, and swimlane activitydiagrams in the figures illustrate the use case, functionality,architecture, and operation of possible implementations of methods,computer program products, and systems according to various embodimentsof the present invention. In this regard, each item in the flowchart,GUI, sequence, system, component, and swimlane activity diagrams mayrepresent a module, segment, or portion of instructions, which comprisesone or more executable instructions for implementing the specifiedlogical function(s). In some alternative implementations, the functionsnoted in the item may occur out of the order noted in the figures. Forexample, two items shown in succession may, in fact, be executedsubstantially concurrently, or the items may sometimes be executed inthe reverse order depending upon the functionality involved. It willalso be noted that each item, that does not involve one or more users,of the flowchart, GUI, sequence, system, component, and swimlaneactivity diagrams, and combinations of items, wherein the combination ofitems does not involve one or more users, in the flowchart, GUI,sequence, system, component, and swimlane activity diagrams can beimplemented by special purpose hardware-based systems that perform thespecified functions or acts or carry out combinations of special purposehardware and computer instructions.

Aspects of the present invention are described herein with reference toflowchart, GUI, sequence, system, component, and swimlane activitydiagrams of methods, computer program products, and systems according toembodiments of the invention. It will be understood that each item, thatdoes not involve one or more users, of the flowchart, GUI, sequence,system, component, and swimlane activity diagrams, and combinations ofitems, that do not involve one or more users, in the flowchart, GUI,sequence, system, component, and swimlane activity diagrams can beimplemented by computer readable program instructions.

These computer readable program instructions may be provided to aprocessor of a general purpose computer, special purpose computer, orother programmable data processing apparatus to produce a machine, suchthat the instructions, which execute via the processor of the computeror other programmable data processing apparatus, create means forimplementing the functions/acts, that do not involve one or more users,specified in the flowchart, GUI, sequence, system, component, andswimlane activity diagram item or items, wherein the item and items donot involve one or more users. These computer readable programinstructions may also be stored in a computer readable storage mediumthat can direct a computer, a programmable data processing apparatus,and or other devices to function in a particular manner, such that thecomputer readable storage medium having instructions stored thereincomprises an article of manufacture including instructions whichimplement aspects of the function/act, that does not involve one or moreusers, specified in the flowchart, GUI, sequence, system, component, andswimlane activity diagram item or items, wherein the item and items donot involve one or more users.

Such code, as will be appreciated by those of ordinary skilled in theart, may be stored or adapted for storage in one or more tangiblemachine readable media, such as on memory chips, local or remote harddisks, optical disks or other media, which may be accessed by aprocessor based system to execute the stored code. Note that thetangible media may comprise paper or another suitable medium upon whichthe instructions are printed. For instance, the instructions may beelectronically captured via optical scanning of the paper or othermedium, then compiled, interpreted or otherwise processed in a suitablemanner if necessary, and then stored in a computer memory. Furthermore,note that the tangible media may comprise version control repositoriesutilizing memory chips, local, or remote hard disks, optical disks orother media for storage. For instance, the instructions can be obtainedfrom a version control repository, then compiled, interpreted orotherwise processed in a suitable way, and then stored in a computermemory.

The computer readable program instructions may also be loaded onto acomputer, other programmable data processing apparatus, or other deviceto cause a series of operational steps to be performed on the computer,other programmable apparatus or other device to produce a computerimplemented process, such that the instructions which execute on thecomputer, other programmable apparatus, or other device implement thefunctions/acts specified in the flowchart, GUI, sequence, system,component, and swimlane activity diagram item or items.

Further, while the methods, non-transitory computer readable mediums,systems, and devices described herein may be susceptible to variousmodifications and alternative forms, specific examples thereof have beenshown in the drawings and are herein described in detail. It should beunderstood, however, that the invention is not to be limited to theparticular forms or methods disclosed, but, to the contrary, theinvention is to cover all modifications, equivalents, and alternativesfalling within the spirit and scope of the various implementationsdescribed and the appended claims. Furthermore, the disclosure herein ofany particular feature, aspect, method, property, characteristic,quality, attribute, element, or the like in connection with animplementation or embodiment can be used in all other implementations orembodiments set forth herein. Any methods disclosed herein need not beperformed in the order recited. The methods disclosed herein may includecertain actions taken by a practitioner; however, the methods can alsoinclude any third-party instruction of those actions, either expresslyor by implication. The ranges disclosed herein also encompass any andall overlap, sub-ranges, and combinations thereof.

Language such as “at least,” “at a minimum,” and the like includes thenumber recited. Numbers preceded by a term such as “about” or“approximately” include the recited numbers and should be interpretedbased on the circumstances (e.g., as accurate as reasonably possibleunder the circumstances, for example −5%, 5%, 10%, 15%, etc.). Forexample, “about 3.5 mm” includes “3.5 mm.” Phrases preceded by a termsuch as “substantially” include the recited phrase and should beinterpreted based on the circumstances (e.g., as much as reasonablypossible under the circumstances). For example, “substantially constant”includes “constant.”

The detailed description is presented to enable a person of ordinaryskill in the art to make and use the invention and is provided in thecontext of the requirement for obtaining a patent. Various modificationsto the exemplary embodiments will be readily apparent to those skilledin the art and the generic principles of the present invention may beapplied to other embodiments, and some features of the present inventionmay be used without the corresponding use of other features.Accordingly, the present invention is not intended to be limited to theembodiments shown but is to be accorded the widest scope consistent withthe principles and features described herein.

What is claimed:
 1. A system comprising: a client electronic device withat least one processor and memory; a web browser; and a web browserextension operative to create a modified graphical user interface (GUI)display of the web browser, the modified GUI display comprising: aplurality of displayed annotation symbols, received from an annotationserver, embedded within the text of a web document, wherein thedisplayed annotation symbol has a state selected from a group of states,and wherein the group of states comprises: closed; and open; wherein thedisplayed annotation symbol in the closed state displays the annotationsymbol on the web document with minimal visual alteration of the webdocument, and wherein the displayed annotation symbol in the open statedisplays elements, received from an annotation server, comprising: anannotation highlight of a selected piece of text from the document,wherein the selected piece of text is representative of the annotation;an annotation comment; and the displayed annotation symbol specifying aselection by the creator of the annotation from a group of annotationsemantic relationships, wherein the group of annotation semanticrelationships comprises: a disagreement relationship indicatingdisagreement between the selected piece of text and the annotationcomment; and a question relationship indicating the annotation commentasks a question about the selected piece of text.
 2. The system of claim1, wherein the group of annotation semantic relationships furthercomprises: an agreement relationship indicating agreement between theselected piece of text and the annotation comment; and an exclamatoryrelationship indicating the annotation comment specifies an exclamatoryremark that is a point of caution or an interesting fact about theselected piece of text.
 3. The system of claim 1, wherein the selectedpiece of text is highlighted in a color pre-assigned to the displayedannotation symbol depending on the annotation semantic relationship towhich the displayed annotation symbol corresponds.
 4. The system ofclaim 1, with the displayed annotation symbol in the open statedisplaying elements further comprising an annotation comment boxcomprising: an annotation comment; a control bar presenting controls tothe user to control a privacy setting selected from a group of privacystates; and a background color of the annotation comment box thatindicates the privacy setting, wherein a different background color isassigned to each privacy state in the group of privacy states.
 5. Thesystem of claim 1, with the modified GUI display further comprising asymbols beacon, wherein the symbols beacon has a state selected from agroup of states comprising: triggered; and untriggered; wherein thesymbols beacon comprises a trigger mechanism that transitions thesymbols beacon from the untriggered state to the triggered state, andwherein the symbols beacon being in the triggered state causes thedisplay of screen elements comprising a displayed annotation symbolbeacon making the location of the displayed annotation symbol moresalient for each displayed annotation symbol displayed in the userviewable area of the web browser.
 6. The system of claim 5, wherein thedisplayed annotation symbol beacon and the corresponding displayedannotation symbol are assigned the same pre-assigned color depending onthe annotation semantic relationship to which the displayed annotationsymbol corresponds.
 7. The system of claim 5, wherein the triggermechanism is a button displayed in the viewable area of the web browser.8. The system of claim 5, wherein the trigger mechanism is a pre-definedcombination of inputs selected from a group comprising: key presses on akeyboard; and button presses on a mouse.
 9. The system of claim 5,wherein the trigger mechanism is a menu option in the web browser. 10.The system of claim 1, wherein the group of annotation semanticrelationships further comprise an advertisement relationship indicatingthe annotation comment is an advertisement related to the selected pieceof text, wherein the creator of the annotation is an advertiser, whereinan advertisement displayed annotation symbol is the displayed annotationsymbol corresponding to the relationship indicating the annotationcomment is an advertisement related to the selected piece of text, andwherein the advertisement originates from an ad server.
 11. A systemcomprising: a client electronic device with at least one processor andmemory; a web browser with notepad feature comprising: a notepad state,wherein the notepad state has a state selected from a group of statescomprising: active notepad present; and active notepad not present; anactive notepad, wherein the active notepad is present when the notepadstate has the state of active notepad present, wherein the activenotepad is selected from a group of notepads accessible to a useraccount of the user using the web browser with notepad feature, whereina notepad comprises a list of references to screenshot bundles, whereina screenshot bundle comprises: the uniform resource locator (URL) for adocument; data for representing a selected piece of text from thedocument, wherein the selected piece of text is representative of anannotation; information for finding the selected piece of text in thedocument; and a group of one or more deliverable screenshots, wherein adeliverable screenshot corresponds to a marked screenshot in a storagegroup, wherein the deliverable screenshot comprises a pre-determinedselection from a group comprising: the marked screenshot itself; and aURL for retrieving the marked screenshot from a CDN, wherein the storagegroup comprises one or more marked screenshots created from an initialmarked screenshot comprising a portion of the document showing theselected piece of text, wherein the selected piece of text is visuallymarked; a screenshot bundles display set comprising a plurality ofscreenshot display bundles with each screenshot display bundleassociated to one screenshot bundle, wherein a screenshot display bundlecomprises: a thumbnail marked screenshot based on one deliverablescreenshot; and the selected piece of text from the document of theassociated annotation object; wherein the elements of the screenshotbundles display set are displayed as screenshot display bundles in adisplay area of the web browser.
 12. The system of claim 11, wherein theannotation object further comprises an annotation comment, and whereinthe screenshot display bundle further comprises the annotation comment.13. The system of claim 12, wherein the web browser with notepad featureis operative to allow a user to select an annotation object reference toadd to the list of references to annotation objects of the activenotepad causing the web browser with notepad feature to send a messageto an annotation server to add an annotation object reference to theactive notepad.
 14. The system of claim 13, wherein the operation toallow a user to select an annotation object reference to add to the listof references to annotation objects of the active notepad is provided byan add to notepad button located in a contextual variant annotationcontrol bar in an annotation comment box comprising: the annotationcomment; and the contextual variant annotation control bar comprising agroup of buttons exposing functionality to the user comprising at leastone of adding the annotation object reference to the list of referencesto annotation objects of the active notepad.
 15. The system of claim 14,wherein the display area of the annotation capable web browser isoperative to allow a user to click a screenshot display bundle causingthe web browser with notepad feature to carry out actions comprising:opening a tab for the URL of the annotation represented by thescreenshot display bundle; scrolling to the location of the selectedpiece of text from the document; and showing the annotation highlightedtext and the annotation comment box.
 16. The system of claim 12, whereinthe annotation object further comprises data for representing adisplayed annotation symbol, wherein the screenshot display bundlefurther comprises the displayed annotation symbol, wherein the displayedannotation symbol comprises a selection by the creator of the annotationfrom a group of annotation semantic relationships, and wherein the groupof annotation semantic relationships comprises: a disagreementrelationship indicating disagreement between the selected piece of textand the annotation comment; and a question relationship indicating theannotation comment asks a question about the selected piece of text. 17.The system of claim 16, wherein the group of annotation semanticrelationships further comprises: an agreement relationship indicatingagreement between the selected piece of text and the annotation comment;and an exclamatory relationship indicating the annotation commentspecifies an exclamatory remark that is a point of caution or aninteresting fact about the selected piece of text.
 18. The system ofclaim 16, wherein the selected piece of text is highlighted in a colorpre-assigned to the displayed annotation symbol depending on theannotation semantic relationship to which the displayed annotationsymbol corresponds.
 19. The system of claim 16, wherein the group ofannotation semantic relationships further comprise an advertisementrelationship indicating the annotation comment is an advertisementrelated to the selected piece of text, wherein the annotation creator isan advertiser, and an advertisement displayed annotation symbol is thedisplayed annotation symbol corresponding to the relationship indicatingthe annotation comment is an advertisement related to the selected pieceof text, and wherein the advertisement originates from an ad server.